React Component Life Cycle with Diagram

In this part, we learn about the react component life cycle. As we have seen, components are pretty useful and our React application is nothing but just a bunch of components, basically, our React application is just a collection of components that run accordingly and build our React app. Every React component has its own life cycle in the application.

Component’s Life Cycle has 3 phases:

• Mounting (birth)
• Updating (changes)
• Unmounting (death)

React Component Life Cycle Diagram

There are some basic and main methods in the react component life cycle:

• render() method: This render method is used to render the DOM or you can say with the help of the render method we can show our application. render should be pure which won’t give you different output for the same input simply, this won’t give you a side effect. Also, they are immutable functions. It runs during the mounting and updating of the component.
• componentDidMount: This method runs after the render method, as its name suggests, this will show your component did mounted and ready to go. We use this method when we are applying any API, state, props, etc.
• componentDidUpdate: This method runs if the component gets some changes in it like state changes or props changes. componentDidUpdate method runs every time we change something in the application.
• componentWillUnmount : This method is called just before the destruction or unmounting of the component. Basically, it is used to perform cleanups.

Also, there are many other methods available, but we have to remember these because we usually use them often other methods have less use. We will see later in this article.

Mounting

As we discussed, the mounting phase is the initial phase of the component life cycle. There are 4 lifecycle methods in the mounting phase:

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

constructor()

constructor is the JavaScript method, it is called automatically when we create an object of the constructor. Generally, we use it to call the super() class in react when we’re creating a state or using props. React uses the constructor to pass props to the parent component.

constructor(props){
   super( props );
}

static getDerivedStateFromProps()

getDerivedStateFromProps is introduced in version 16.3. getDerivedStateFromProps is used to update the state in response to a change in props without an additional render. This method is called just before the render method in mounting or updating the component.

static getDerivedStateFromProps(props, state)

It has two argument props and a state. If the state changes, we will get updated props here.

render()

As we discussed earlier, the render method is used to render or to show DOM. Basically, you need to provide elements or things that you want to show on the screen.

ReactDOM.render(/*elements to show*/, document.getElementById('root'),callback());

render method has 3 arguments, The first one indicates what to show. the second one indicates where to show. and the third one is the callback function. whatever you want to show on your application, you can put here as the first argument. document.getElementById indicates where your content will display and the callback function returns some value if added.

componentDidMount

componentDidMount is a method that runs after the render method, as its name suggests, this will show your component did mounted and ready to go. We use this method when we are applying any API, state, props, etc. It will allow you to execute the code when the component is placed in DOM.

componentDidMount()

Updating

Updating phase triggers if any changes happen like changes in state or props. There are some methods in the updating phase:

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

static getDerivedStateFromProps() and render() methods will be the same as we discussed in the mounting phase.

shouldComponentUpdate()

The shouldComponentUpdate method allows up to exit react update, which performs re-render again and again, so it won’t affect the performance and optimization of the application. Generally, we use this method to optimize and responsiveness of the application, but it won’t resolve bugs.

shouldComponentUpdate(nextProps, nextState)

The return value of this method is by default true, if it turns to false then the other method won’t work well.

getSnapshotBeforeUpdate()

This getSnapshotBeforeUpdate is invoked before the render method, this is used to store the previous values of the state. Values returned by getSnapshotBeforeUpdate will be used as a parameter for the componentDidUpdate() method, this method always be called with the componentDidUpdate method.

getSnapshotBeforeUpdate(prevProps, prevState)

As an argument, it holds previous props values and previous state values.

componentDidUpdate()

This method runs if the component gets some changes in it like state changes or props changes. componentDidUpdate method runs every time we change something in the application.

componentDidUpdate(prevProps, prevState, snapshot)

• prevProps: Previous props values passed to the component.
• prevState: Previous state values of the component.
• snapshot: Value returned by getSnapshotBeforeUpdate() method.

Unmounting

In the unmounting phase, we just need to perform cleanups like canceling the network, invalidating timers, etc. This phase contains one method which performs cleanups.

componentWillUnmount()

This method doesn’t contain any argument or parameter because it simply cleans the application.

You may also like:

• How to Make E-commerce Product Card Using ReactJS
• How to Make Image Slider In React
• How to Make QR-Code Generator in React