Question

128

What is getSnapshotBeforeUpdate() in React?

rated 0 times [ 130] [ 2] / answers: 1 / hits: 27502 / 6 Years ago, wed, november 7, 2018, 12:00:00

I went through below React official site to understand about new life cycle method getSnapshotBeforeUpdate

But I couldn’t understand the advantage of this method and when exactly we should use.

Below is the example from docs and it differentiates two methods.

getSnapshotBeforeUpdate(prevProps, prevState) {

// Are we adding new items to the list?

// Capture the scroll position so we can adjust scroll later.

if (prevProps.list.length < this.props.list.length) {

  const list = this.listRef.current;

  return list.scrollHeight - list.scrollTop;

}

return null;

}



componentDidUpdate(prevProps, prevState, snapshot) {

    // If we have a snapshot value, we've just added new items.

   // Adjust scroll so these new items don't push the old ones out of view.

   // (snapshot here is the value returned from getSnapshotBeforeUpdate)

   if (snapshot !== null) {

      const list = this.listRef.current;

       list.scrollTop = list.scrollHeight - snapshot;

    }

  }

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jenamackennac

Add To Favorites

Follow

Total Points: 304

Total Questions: 110

Total Answers: 107

Location: Ecuador

Member since Thu, Jun 4, 2020

4 Years ago

answered 6 Years ago mireyag · Accepted Answer

The two paragraphs above the example you quoted explain the need for that:

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.

In other words: React 16.6 introduced a new feature called Suspense. This feature enables async rendering - the rendering of a subtree of react components can be delayed (for example to wait for a network resource to load). It is also used internally by React to favor important DOM updates over others to increase the perceived rendering performance. This can - as one would expect - cause substantial delays between the react-side virtual DOM rendering (which triggers componentWillUpdate and render(), but may contain some async component subtree which has to be awaited) and the actual reflection to the DOM (which triggers componentDidUpdate). In older react versions before Suspense these lifecycle hooks were always called with very little delay because the rendering was completely synchronous, which justified the pattern to gather DOM information in componentWillUpdate and use it in componentDidUpdate, which is no longer the case.