304 North Cardinal St.
Dorchester Center, MA 02124
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:
There are some basic and main methods in the react component life cycle:
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.
As we discussed, the mounting phase is the initial phase of the component life cycle. There are 4 lifecycle methods in the mounting phase:
super( props );
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.
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 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.
Updating phase triggers if any changes happen like changes in state or props. There are some methods in the updating phase:
static getDerivedStateFromProps() and render() methods will be the same as we discussed in the mounting phase.
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.
The return value of this method is by default true, if it turns to false then the other method won’t work well.
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.
As an argument, it holds previous props values and previous state values.
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)
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.
This method doesn’t contain any argument or parameter because it simply cleans the application.
You may also like: