ReactJS Component Lifecycle

Syntax

class ComponentName extends React.Component {

    constructor(props) {

    }

    componentWillMount() {

    }

    componentDidMount() {

    }

    componentWillReceiveProps(nextProps) {

    }

    shouldComponentUpdate(nextProps, nextState) {

    }

    componentWillUpdate(nextProps, nextState) {

    }

    componentDidUpdate(prevProps, prevState) {

    }

    componentWillUnmount() {

  }

    render() {

    }

}

Example

import React from 'react';

class HelloWorld extends React.Component {
    constructor(props) {
        super(props);
        this.state = { message: 'Hello, World!' };
    }

    componentWillMount() {
        console.log('Component will mount');
    }

    componentDidMount() {
        console.log('Component did mount');
    }

    componentWillReceiveProps(nextProps) {
        console.log('Component will receive props');
    }

    shouldComponentUpdate(nextProps, nextState) {
        console.log('Should component update');
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
        console.log('Component will update');
    }

    componentDidUpdate(prevProps, prevState) {
        console.log('Component did update');
    }

    componentWillUnmount() {
        console.log('Component will unmount');
    }

    render() {
        return <h1>{this.state.message}</h1>;
    }
}

export default HelloWorld;

Explanation

ReactJS component lifecycle consists of three main phases: Mounting, Updating, and Unmounting.

Mounting

The first phase in the ReactJS component lifecycle is the mounting phase. In this phase, the component is created and inserted into the DOM. The following methods are called during the mounting phase:

1. constructor(): This method is called when the component object is created. The constructor initializes the state of the component.

2. componentWillMount(): This method is called just before the component is rendered. It is called only once in the component lifecycle.

3. render(): This method is called to render the component. It returns the JSX that represents the UI of the component.

4. componentDidMount(): This method is called after the component is rendered. It is called only once in the component lifecycle.

Updating

The second phase in the ReactJS component lifecycle is the updating phase. In this phase, the component is updated whenever there is a change in its state or props. The following methods are called during the updating phase:

1. componentWillReceiveProps(): This method is called when the component is about to receive new props. It is called before shouldComponentUpdate().

2. shouldComponentUpdate(): This method is called before the component is updated. It checks whether the component should be updated or not. If shouldComponentUpdate() returns true, then the component will be updated, else it won't be updated.

3. componentWillUpdate(): This method is called just before the component is updated.

4. render(): This method is called to render the updated component. It returns the JSX that represents the UI of the component.

5. componentDidUpdate(): This method is called after the component is updated.

Unmounting

The third phase in the ReactJS component lifecycle is the unmounting phase. In this phase, the component is removed from the DOM. The following method is called during the unmounting phase:

1. componentWillUnmount(): This method is called just before the component is removed from the DOM. It is used to free up resources that the component was using.

Use

ReactJS component lifecycle methods are used to manage the state and props of a component. These methods are used to handle different events in the lifecycle of a component. For example, the componentWillMount() method is used to initialize the state of a component, componentDidMount() is used to fetch data from APIs, componentWillReceiveProps() is used to update the state of a component when new props are passed to it, and componentWillUnmount() is used to free up resources that the component was using.

Important Points

• The render() method is the only required method in a ReactJS component.

• A component can update its state by calling the setState() method.

• The shouldComponentUpdate() method should always be avoided unless it is absolutely necessary because it may cause performance issues.

• The componentDidMount() method is the best place to call APIs for fetching data.

• The componentWillUnmount() method is the best place to free up resources that the component was using.

Summary

ReactJS component lifecycle consists of three main phases: Mounting, Updating, and Unmounting. Each phase has its own set of methods that are called during different events in the lifecycle of a component. These methods are used to manage the state and props of a component. The lifecycle methods of a component are very important and understanding them is crucial for building efficient ReactJS applications.