title: What is getSnapshotBeforeUpdate() in React?
body: <p>I went through below React official site to understand about new life cycle method <a href="https://reactjs.org/docs/react-component.html#getsnapshotbeforeupdate" rel="noreferrer"><code>getSnapshotBeforeUpdate</code></a></p>
  
  <p>But I couldn’t understand the advantage of this method and when exactly we should use.</p>
  
  <p>Below is the example from docs and it differentiates two methods.</p>
  
  <pre><code>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 &lt; 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;
      }
    }
  </code></pre>