Component’s lifecycle methods in ReactJS -part 2

If you are a complete beginner to Component’s lifecycle methods in ReactJS, I recommend you to have a quick look at my ReactJS part 1 article published previously.

· Let’s get this continued…

During Updating, the following methods are called in order

• getDerivedStateFromProps →shouldComponentUpdate, →render, →getSnapshotBeforeUpdate → componentDidUpdate

During Unmounting,

• componentWillUnmount

getDerivedStateFromProps

Use this to update your state from props. It should return an object to update the state, or null to update nothing.

If you’d like, you can reuse some code between getDerivedStateFromProps.

it is a static method, “this” cannot be accessed inside this method, neither can access any other class method.

Setting the state cannot be used inside this method, so the only way to update the state is to return an object.

Now let’s have a look at how it works:

shouldComponentUpdate

To decide whether to update the component or not that return boolean answer. This method is the first real life cycle optimization method that can leverage in React.

This method only exists as a performance optimization.

getSnapshotBeforeUpdate

n the getSnapshotBeforeUpdate method you have access to the props and state before the update, meaning that even after the update, you can check what the values were before the update.

If the getSnapshotBeforeUpdatemethod is present, you should also include the componentDidUpdate() the method, otherwise you will get an error.

The example below might seem complicated, but all it does is this:

When the component is mounting it is rendered with the favorite color “red”.

When the component has been mounted, a timer changes the state, and after one second, the favorite color becomes “yellow”.

This action triggers the update phase, and since this component has a getSnapshotBeforeUpdate() method, this method is executed, and writes a message

componentDidUpdate

componentDidUpdate() is invoked immediately after updating occurs.

· Next, I’ll focus on what……. Unmounting method

componentWillUnmount

componentWillUnmount() is invoked immediately before a component is unmounted and destroyed.

Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount().

Should not call setState() in componentwWillUnmount() because the component will never be re-rendered. Once a component instance is unmounted, it will never be mounted again.

getDerivedStateFromError/componentDidCatch

getDerivedStateFromError() is invoked after an error has been thrown by a descendant component.

It receives the error that was thrown as a parameter and should return a value to update the state.

Conclusion

And that’s it! You should now have a good idea aboutComponent’s lifecycle methods in ReactJS.

See you guys in the next article! ❤️

✌