The common React Component Lifecycle methods

Quick review

Everybody knows about the React community’s increase and how stable this library has become. Even after the Hooks release, some projects still use classes, therefore the component lifecycle is current. Furthermore, I still think it is a very important concept. So here is a list of reminders about how this lifecycle works.

The mainly functions

We’ll understand the most common react lifecycle methods. The next image was found in the React documentation version 16.4.

componentDidMount()

• Invoked immediately after a component is mounted (inserted into the tree)
• A good place to set up things (but don’t forget to unsetup in componentWillUnmount())

componentDidUpdate()

• This function has 3 parameters: prevProps, prevState, snapshot
• Invoked immediately after updating occurs.
• A good place to do network requests as long as you compare the previous props to the current props (do not make unnecessary requests)
• It’s not recommended to call `setState` function in this function, which may cause an infinite loop.
• The (rare) case that you should use the snapshot param will be when your component implements the getSnapshotBeforeUpdate() lifecycle function.
• Will not be invoked if shouldComponentUpdate() returns false.

componentWillUnmount()

• Invoked immediately before a component is unmounted and destroyed.
• A good place to perform any necessary cleanup
• You should not call setState here

When you learn how to use the whole component lifecycle, you will probably gain much more performance. So, the basic concepts must be learned and applied for a high-quality application.