Lifecycle methods: In ReactJS, the development of each component involves the use of different lifecycle methods. All the lifecycle methods used to create such components, together constitute the component’s lifecycle. They are defined as a series of functions invoked in various stages of a component. Each phase of the lifecycle components includes some specific lifecycle methods related to that particular phase. There are primarily 4 phases involved in the lifecycle of a reactive component, as follows.
- Initializing
- Mounting
- Updating
- Unmounting
Phase 1: Initializing
This is the initial phase of the React component lifecycle. As the name suggests, this phase involves all the declarations, definitions, and initialization of properties, default props as well as the initial state of the component required by the developer. In a class-based component, this is implemented in the constructor of the component. This phase occurs only once throughout the entire lifecycle. The methods included in this phase are:
- getDefaultProps(): The method invoked immediately before the component is created or any props from the parent component are passed into the said (child) component. It is used to specify the default value of the props.
- getInitialState(): The method invoked immediately before the component is created and used to specify the default value of the state.
Phase 2: Mounting
The second phase of the React component lifecycle, followed by the initialization phase, is the mounting phase. It commences when the component is positioned over the DOM container(meaning, an instance of the component is created and inserted into the DOM) and rendered on a webpage. It consists of 2 methods, namely:
- componentWillMount(): The method invoked immediately before the component is positioned on the DOM, i.e. right before the component is rendered on the screen for the very first time.
- componentDidMount(): The method invoked immediately after the component is positioned on the DOM, i.e. right after the component is rendered on the screen for the very first time.
Phase 3: Updating
The third phase of the ReactJS Component Lifecycle is the Updation phase. Followed by the mounting phase, it updates the states and properties that were declared and initialized during the initialization phase (if at all any changes are required). It is also responsible for handling user interaction and passing data within the component hierarchy. Unlike the initialization phase, this phase can be repeated multiple times. Some of the lifecycle methods falling into this category are as follows:
- componentWillReceiveProps(): The method invoked immediately before the props of a mounted component get reassigned. It accepts new props which may/may not be the same as the original props.
- shouldComponentUpdate(): The method invoked before deciding whether the newly rendered props are required to be displayed on the webpage or not. It is useful in those scenarios when there is such a requirement not to display the new props on the screen.
- componentWillUpdate(): The method invoked immediately before the component is re-rendered after updating the states and/or properties.
- componentDidUpdate(): The method invoked immediately after the component is re-rendered after updating the states and/or properties.
Phase 4: Unmounting
Unmounting is the last phase of the ReactJS component lifecycle. This phase includes those lifecycle methods which are used when a component is getting detached from the DOM container(meaning, the instance of the component being destroyed and unmounted from the DOM). It is also responsible for performing the required cleanup tasks. Once unmounted, a component can not be re-mounted again.
- componentWillUnmount(): The method invoked immediately before the component is removed from the DOM at last, i.e. right when the component is completely removed from the page and this shows the end of its lifecycle.
Example: Creating React Application:
-
Step 1: Create a new react application using the following command:
npx create-react-app demo-app
-
Step 2: Move into your project directory using the following command:
cd demo-app
Example: Now write down the following code in the App.js file.
App.js
import React, { Component } from "react"; class App extends Component { constructor(props) { super(props); this.state = { myState: "neveropen" }; this.changeMyState = this.changeMyState.bind(this); } render() { return ( <div style={{ textAlign: "center", marginTop: "5%", color: "#006600" }}> <h1>Phases of ReactJS Component Lifecycle</h1> <h3> {this.state.myState}</h3> <button onClick={this.changeMyState}>Click Me!</button> </div> ); } componentWillMount() { console.log("Phase 2: MOUNTING -> Component Will Mount!"); } componentDidMount() { console.log("Phase 2: MOUNTING -> Component Did Mount!"); } // Changing in state changeMyState() { this.setState({ myState: "neveropen Tutorial on Phases of ReactJS Lifecycle Methods!", }); } // Props receiver function componentWillReceiveProps(newProps) { console.log("Phase 3: UPDATING -> Component Will Receive Props!"); } shouldComponentUpdate(newProps, newState) { // Phase 3: UPDATING return true; } // Updation of component componentWillUpdate(nextProps, nextState) { console.log("Phase 3: UPDATING -> Component Will update!"); } componentDidUpdate(prevProps, prevState) { console.log("Phase 3: UPDATING -> Component Did update!"); } // Unmount of component componentWillUnmount() { console.log("Phase 3: UNMOUNTING -> Component Will unmount!"); } } export default App; |
Run the file: You can save this file and then run your App locally on localhost:3000 using this command:
npm start
Output:
