ReactJS – Component Life Cycle In Depth (Continue)

As we have discussed about MOUNTING  here and we will continue to discuss about UPDATING life cycles in REACT in this Section.


3. getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate() is invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed. Any value returned by this lifecycle will be passed as a parameter to componentDidUpdate().

This use case is not common, but it may occur in UIs like a chat thread that need to handle scroll position in a special way.

A snapshot value (or null) should be returned.

For example:

class ScrollingList extends React.Component {
  constructor(props) {
    this.listRef = React.createRef();

  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;

  render() {
    return (
      <div ref={this.listRef}>{/* ...contents... */}</div>

In the above examples, it is important to read the scrollHeight property in getSnapshotBeforeUpdate because there may be delays between “render” phase lifecycles (like render) and “commit” phase lifecycles (like getSnapshotBeforeUpdate and componentDidUpdate).


4. componentDidUpdate(prevProps, prevState, snapshot)

This method will get called after every rendering occurs. As this method is only called once after the update, it is a suitable place for implement any side effect operations. However, do not forget to do the comparison between the previous and current props.

componentDidUpdate(prevProps, prevState, snapshot) {
    if (this.state.count !== prevState.count) {
      // state has change!! Do some side effect as you wish




Just like the rest of our life cycle phases, the Death/Unmount phase has a method hook for us. This method allows us to do some cleanup before we are removed from the UI stack. Typically we want to reverse any setup we did in either componentWillMount() or componentDidMount().

For example, we would want to unregister any global/system/library events, destroy 3rd party UI library elements, etc. If we don’t take the time to remove events we can create memory leaks in our system or leave bad references laying around.

React starts with the Element being removed, for example A.0, and calls componentWillUnmount() on it. Then React goes to the first child (A.0.0) and does the same, working its way down to the last child. Once all the calls have been made, React will remove the Components from the UI and ready them for Garbage Collection.