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:-
|
1 2 3 4 5 6 7 8 9 10 |
class Clock extends React.Component { constructor(props) { // Parent Class React.Component super(props); // Setting the initial state this.state = { date : new Date() }; } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { hello : "World!" }; this.changeState = this.changeState.bind(this) } componentWillMount() { console.log("componentWillMount()"); } componentDidMount() { console.log("componentDidMount()"); } changeState() { this.setState({ hello : "W3Adda!" }); } render() { return ( <div> <h1>W3Adda - ReactJS Component's Lifecycle</h1> <h3>Hello { this.state.hello }</h3> <button onClick={this.changeState}>Click Me!</button> </div>); } shouldComponentUpdate(nextProps, nextState) { console.log("shouldComponentUpdate()"); return true; } componentWillUpdate() { console.log("componentWillUpdate()"); } componentDidUpdate() { console.log("componentDidUpdate()"); } } export default App; |
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.
|
1 |
npm start |
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:-
Screen 2:-
