From b0c22f75eff54b65d2f9a60e1cad2e547ae81b21 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Fri, 23 Mar 2018 12:48:11 -0700 Subject: [PATCH] Wording tweak --- content/blog/2018-03-15-update-on-async-rendering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/blog/2018-03-15-update-on-async-rendering.md b/content/blog/2018-03-15-update-on-async-rendering.md index 192182bc..16287571 100644 --- a/content/blog/2018-03-15-update-on-async-rendering.md +++ b/content/blog/2018-03-15-update-on-async-rendering.md @@ -132,7 +132,7 @@ The recommended upgrade path for this component is to move data-updates into `co Here is an example of a component that reads a property from the DOM before an update in order to maintain scroll position within a list: `embed:update-on-async-rendering/react-dom-properties-before-update-before.js` -In the above example, `componentWillUpdate` is used to read the DOM property. However with async rendering, there may be delays between "render" phase lifecycles (like `componentWillUpdate` and `render`) and "commit" phase lifecycles (like `componentDidUpdate`). A user might continue scrolling during this delay, in which case the position value read from `componentWillUpdate` will be stale. +In the above example, `componentWillUpdate` is used to read the DOM property. However with async rendering, there may be delays between "render" phase lifecycles (like `componentWillUpdate` and `render`) and "commit" phase lifecycles (like `componentDidUpdate`). If the user does something like resize the window during this time, the `scrollHeight` value read from `componentWillUpdate` will be stale. The solution to this problem is to use the new "commit" phase lifecycle, `getSnapshotBeforeUpdate`. This method gets called _immediately before_ mutations are made (e.g. before the DOM is updated). It can return a value for React to pass as a parameter to `componentDidUpdate`, which gets called _immediately after_ mutations.