React lifecycle refers to the different phases a component goes through during its time in a React application. These phases allow you to run specific code at key moments in a component’s life, such as when it’s created, updated, or removed from the screen.

• Mounting: Initializes, renders, and mounts the component (componentDidMount()).
• Updating: Handles state/prop changes, re-renders, and updates (componentDidUpdate()).
• Unmounting: Cleans up before removal (componentWillUnmount()).

Phases of Lifecycle in React Components

1. Mounting

Mounting refers to the process of creating and inserting a component into the DOM for the first time in a React application. During mounting, React initializes the component, sets up its internal state (if any), and inserts it into the DOM.

• constructor
• getDerivedStateFromProps
• render()
• componentDidMount()

constructor()

Method to initialize state and bind methods. Executed before the component is mounted.

constructor(props) {
    super(props); // Always call super(props) before using this.props
    this.state = {
        count: 0, // Initial state
    };
    console.log("Constructor called");
}

getDerivedStateFromProps(props, state)

Used for updating the state based on props. Executed before every render.

static getDerivedStateFromProps(props, state) {
    if (props.value !== state.value) {
        return { value: props.value }; // Update state based on new props
    }
    return null; // No changes to state
}

render() method

Responsible for rendering JSX and updating the DOM.

render() {
    return (
        <div>
            <h1>Hello, React Lifecycle!</h1>
        </div>
    );
}

componentDidMount() Function

This function is invoked right after the component is mounted on the DOM, i.e. this function gets invoked once after the render() function is executed for the first time.

componentDidMount() {
    console.log("Component has been mounted");

    // Example: Fetch data from an API
    fetch("https://api.example.com/data")
        .then(response => response.json())
        .then(data => this.setState({ data }));
}

2. Updation

Updating refers to the process of a component being re-rendered due to changes in its state or props. This phase occurs whenever a component’s internal state is modified or its parent component passes new props. When an update happens, React re-renders the component to reflect the changes and ensures that the DOM is updated accordingly.

• getDerivedStateFromProps
• setState() Function
• shouldComponentUpdate()
• getSnapshotBeforeUpdate() Method
• componentDidUpdate()

getDerivedStateFromProps

getDerivedStateFromProps(props, state) is a static method that is called just before the render() method in both the mounting and updating phase in React. It takes updated props and the current state as arguments.

static getDerivedStateFromProps(props, state) {
    if (props.name !== state.name) {
        return { name: props.name }; // Update state with new props
    }
    return null; // No state change
}

setState()

This is not particularly a Lifecycle function and can be invoked explicitly at any instant. This function is used to update the state of a component.

this.setState((prevState, props) => ({
      counter: prevState.count + props.diff
}));

shouldComponentUpdate()

shouldComponentUpdate() Is a lifecycle method in React class components that determines whether a component should re-render. It compares the current and next props/states and returns true if the component should update or false if it should not.

shouldComponentUpdate(nextProps, nextState)

It returns true or false, if false, then render(), componentWillUpdate(), and componentDidUpdate() method does not get invoked.

getSnapshotBeforeUpdate() Method

The getSnapshotBeforeUpdate() method is invoked just before the DOM is being rendered. It is used to store the previous values of the state after the DOM is updated.

getSnapshotBeforeUpdate(prevProps, prevState)

componentDidUpdate()

Similarly, this function is invoked after the component is rendered, i.e., this function gets invoked once after the render() function is executed after the updation of State or Props.

componentDidUpdate(prevProps, prevState, snapshot)

3. Unmounting

This is the final phase of the lifecycle of the component, which 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 from the DOM, i.e., this function gets invoked once before the component is removed from the page, and this denotes the end of the lifecycle.

Implementing the Component Lifecycle methods

Let us now see one final example to finish the article while revising what’s discussed above.

First, create a react app and edit your index.js file from the src folder.

// Filename - src/index.js:
import React from "react";
import ReactDOM from 'react-dom';
class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hello: "World!" };
    }
    componentDidMount() {
        console.log("componentDidMount()");
    }
    changeState() {
        this.setState({ hello: "Tech!" });
    }
    render() {
        return (
            <div>
                <h1>
                    Techappss.com, Hello
                    {this.state.hello}
                </h1>
                <h2>
                    <a
                        onClick={this.changeState.bind(
                            this
                        )}
                    >
                        Press Here!
                    </a>
                </h2>
            </div>
        );
    }
    shouldComponentUpdate(nextProps, nextState) {
        console.log("shouldComponentUpdate()");
        return true;
    }
    componentDidUpdate() {
        console.log("componentDidUpdate()");
    }
}
const root = ReactDOM.createRoot(
    document.getElementById("root")
);
root.render(<Test />);