ReactJS — Component Life Cycle

Sona
Sona
Oct 20, 2020 · 4 min read
React Lifecycle

Every component in React goes through a lifecycle of events. You can think is of going through a cycle of birth, growth, and death the same as the picture below.

Human and React Lifecycle comparison
Human and React Lifecycle comparison
Human and React Lifecycle

The phases are:

  • Initialization — Starting the journey of your component
  • Mounting — Birth of your component
  • Update — Growth of your component
  • Unmount — Death of your component

1. Initialization

This is the phase in which the component is going to start its journey. The developer has to define the props and initial state of the component. This is usually done inside the constructor method (see below to understand the initialization phase better).

class Increment extends React.Component {constructor(props){super(props);// Setting the initial statethis.state = { count : 0};}}

2. Mounting

Mounting is the phase of the component lifecycle when the initialization of the component is completed and the React component mounts on the DOM (i.e., is created and inserted into the DOM) and rendered for the first time on the webpage. It has 2 predefined functions:-

  • componentWillMount(): As the name clearly suggests, This method is invoked just before a component mounts on the DOM, i.e. this function gets invoked once before the render() function is executed for the first time. After this method, the component gets mounted.
  • componentDidMount(): Similarly to the previous one this method is called after the component gets mounted on the DOM and only once in a lifecycle. Before the execution of this method, the render method is called (i.e., we can access the DOM). We can make API calls and update the state with the API response.
class ReactCycle extends React.Component {
componentWillMount() {
console.log('Component will mount!')
}
componentDidMount() {
console.log('Component did mount!')
this.getData();
}
getData=()=>{
/*** method to make api call***
}
render() {
return (
<div>
<h3>Hello mounting methods!</h3>
</div>
);
}
}

3. Updating

Updation is the phase where the states and props of a component are updated followed by some user events such as clicking, pressing a key on the keyboard etc. This is where the component’s state changes and hence, re-rendering takes place.

The methods that are available in this phase are:

  • componentWillRecieveProps() Function: It is invoked as soon as the props are updated before another render is called. Basically, it is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method.
componentWillRecieveProps(newProps){if (this.props !== newProps) {console.log(" New Props have been assigned ");// Use this.setState() to rerender the page.}}
  • shouldComponentUpdate: This will determine if the component will be updated or not. The Function fulfills the requirement by letting React know whether the component’s output will be affected by every state or props update or not. It is invoked before rendering an already mounted component when new props or states are being received. If returned false then the subsequent steps of rendering will not be carried out. This method is not called for the initial render or when forceUpdate() is used. The Function takes the new Props and new State as the arguments and returns whether to re-render or not by returning a true or false value. By default, it is set to true. This method only exists as a performance optimization
  • componentWillUpdate: is called just before rendering i.e. the function gets invoked once before the render() function is executed after the update of State or Props.
  • componentDidUpdate: is called just after rendering. This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).componentDidUpdate() will not be invoked if shouldComponentUpdate() returns false.

4. Unmounting

This is the final phase of the lifecycle of the component that is the phase of unmounting the component from the DOM. The following function is the sole member of this phase.

  • componentWillUnmount(): This function is invoked before the component is finally unmounted and destroyed from the DOM. You should not call setState() in componentWillUnmount() because the component will never be re-rendered. Once a component instance is unmounted, it will never be mounted again. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount()

Thanks for reading. Happy React coding!…

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Sign up for 💌 Weekly Newsletter

By Weekly Webtips

Get the latest news on the world of web technologies with a series of tutorial Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store