ReactJS Component Lifecycle

In this tutorial you will learn about the ReactJS Component Lifecycle and its application with practical example.

ReactJS Component’s Lifecycle

In React, every component created is goes through process that involves various lifecycle methods is termed as component’s lifecycle. The lifecycle methods are invoked at different phases of the lifecycle of a component. Component’s lifecyle methods are basically divided into following four phases –

  • Initialization
  • Mounting
  • Updating
  • Unmounting

Initialization :-

In this phase a component is provided with default props and initial states. This is done in the constructor of a Component Class.

Example:-

Mounting :-

In this phase React component is created and mounted into the DOM. There are two methods gets called in this phase are –

componentWillMount() :- The componentWillMount() method is invoked once and just before the React Component is about to mount into the DOM. All the tasks that we want to do before a component is mounted are defined here.

componentDidMount() :- The componentDidMount() method is invoked once and just after the React Component is inserted into the DOM and render function is executed.

Updating :-

This is the phase where the state or props of a component is get updated. React component can be updated when sending new props or or when updating the state. Following methods are invoked in updating phase and are executed in following order –

componentWillRecieveProps() :- This method is invoked when a component is receiving new props.

shouldComponentUpdate() :- This method tells the React that should it re-render component or skip rendering. This method returns a boolean (TRUE or FALSE) value and accordingly the component would be re-rendered or skipped. By default it return TRUE.

componentWillUpdate() :- This method is executed just before rendering of component, when the shouldComponentUpdate method returns TRUE.
componentDidUpdate() :- This method is executed right after rendering of component, when the component has been updated.

Unmounting :-

In this phase, React component is get unmounted from the DOM. This is the final phase of the Component’s lifeycle. There is only one method is called in this phase –

componentWillUnmount() :- This method is called just before the component is unmounted from the DOM. This method can be used to perform any cleanup task such as – invalidating timers or cleaning up DOM elements.

Example:-

Step 1:- Let’s open src/App.js, delete the existing code and put the following code in it and save it.

Step 2:- Let’s open the terminal again, change directory to your project folder and type the following command in order to run the server.

Step 3:- Now open the following URL in browser to view the output

http://localhost:3000

Step 4:- You will see the following screen.

Screen 1:-

ReactJS Components Lifecycle

Screen 2:-

ReactJS Components Lifecycle Methods

 

In this tutorial we have learn about the ReactJS Component Lifecycle and its application with practical example. I hope you will like this tutorial.