React Lifecycle Methods – A Deep Dive (Part Two)

Uncommon React Lifecycle Methods

We now have a good idea of all the commonly used React lifecycle methods. Besides that, there are other lifecycle methods that React offers which are sparingly used or not used at all.

shouldComponentUpdate()

This lifecycle can be handy sometimes when you don’t want to React to render your state or prop changes.

Anytime setState() is called, the component re-renders by default. The shouldComponentUpdate() method is used to let React know if a component is not affected by the state and prop changes.

Keep in mind that this lifecycle method should be sparingly used, and it exists only for certain performance optimizations. You cannot update component state in shouldComponentUpdate() lifecycle.

Caution: Most importantly, do not always rely on it to prevent rendering of your component, since it can lead to several bugs.

shouldComponentUpdate(nextProps, nextState) {

 return this.props.title !== nextProps.title || 

  this.state.input !== nextState.input }

As shown in the example above, this lifecycle should always return a boolean value to the question, “Should I re-render my component?

static getDerivedStateFromProps()

This is one of the newer lifecycle methods introduced very recently by the React team.

This will be a safer alternative to the previous lifecycle method componentWillReceiveProps().

It is called just before calling the render() method.

This is a static function that does not have access to “this“.  getDerivedStateFromProps() returns an object to update state in response to prop changes. It can return a null if there is no change to the state.

This method also exists only for rare use cases where the state depends on changes in props in a component.

static getDerivedStateFromProps(props, state) {

    if (props.currentRow !== state.lastRow) {

      return {

        isScrollingDown: props.currentRow > state.lastRow,

        lastRow: props.currentRow,

      };

    }

    // Return null to indicate no change to state.

    return null;

  }

Keep in mind that this lifecycle method is fired on every render.

An example use case where this method may come in handy would be a <Transition> component that compares its previous and next children to decide which ones to animate in and out.

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate() is another new lifecycle method introduced in React recently. This will be a safer alternative to the previous lifecycle method componentWillUpdate().

getSnapshotBeforeUpdate(prevProps, prevState) {

    // ...

  }

It is called right before the DOM is updated. The value that is returned from getSnapshotBeforeUpdate() is passed on to componentDidUpdate().

Keep in mind that this method should also be used rarely or not used at all.

Resizing the window during an async rendering is a good use-case of when the getSnapshotBeforeUpdate() can be utilized.

React Component Lifecycle Diagram

The diagram below is from the official React documentation showcasing the different React lifecycle methods and when they are invoked.

Recap

• React component lifecycle has three categories – Mounting, Updating and Unmounting.
• The render() is the most used lifecycle method.
• It is a pure function.
• You cannot set state in render()
• The componentDidMount() happens as soon as your component is mounted.
• You can set state here but with caution.
• The componentDidUpdate() happens as soon as the updating happens.
• You can set state here but with caution.
• The componentWillUnmount() happens just before the component unmounts and is destroyed.
• This is a good place to clean up all the data.
• You cannot set a state here.
• The shouldComponentUpdate() can be used rarely.
• It can be called if you need to tell React not to re-render for a certain state or prop change.
• This needs to be used with caution only for certain performance optimizations.
• The two new lifecycle methods are getDerivedStateFromProps() and getSnapshotBeforeUpdate().
• They need to be used only occasionally.
• Not many examples are out there for these two methods and they are still being discussed and will have more references in the future.