Lifecycle of Component in ReactJS

In ReactJS, components go through various lifecycle stages from initialization to deletion. Each stage of a component’s lifecycle has a corresponding lifecycle method that allows you to hook into that stage and perform certain actions.

Here is an overview of the different lifecycle stages and their corresponding methods:

Mounting: This is the stage when the component is created and inserted into the DOM.
- constructor(): This is called when the component is first created. It is used to initialize the component’s state and bind event handlers.
- static getDerivedStateFromProps(props, state): This is a new lifecycle method introduced in React 16.3. It is called right before render(). It is used to update the component’s state based on changes in props.
- render(): This method is called to render the component to the DOM. It should be a pure function that returns a JSX element tree.
- componentDidMount(): This method is called once the component has been inserted into the DOM. It is used to perform side effects, such as fetching data from an API or setting up event listeners.
Updating: This is the stage when the component is updated in response to changes in props or state.
- static getDerivedStateFromProps(props, state): This method is also called during the updating stage, just like it is called during the mounting stage.
- shouldComponentUpdate(nextProps, nextState): This method is called before the component is re-rendered. It is used to optimize performance by determining if the component needs to be updated. It should return a boolean value.
- render(): This method is called again to re-render the component if shouldComponentUpdate() returns true.
- getSnapshotBeforeUpdate(prevProps, prevState): This method is called right before the component is re-rendered. It is used to capture information from the DOM, such as scroll position, that is needed after the update.
- componentDidUpdate(prevProps, prevState, snapshot): This method is called after the component has been re-rendered. It is used to perform side effects, such as updating the DOM or fetching data from an API.
Unmounting: This is the stage when the component is removed from the DOM.
- componentWillUnmount(): This method is called just before the component is removed from the DOM. It is used to perform cleanup tasks, such as removing event listeners or canceling API requests.
Error Handling: This is the stage when an error occurs during rendering, in a lifecycle method, or in the constructor.
- static getDerivedStateFromError(error): This method is called when an error occurs during rendering. It is used to update the component’s state with an error message.
- componentDidCatch(error, info): This method is called after an error has been caught by a child component. It is used to log the error or display an error message to the user.

These lifecycle methods allow you to hook into different stages of a component’s lifecycle and perform actions that are necessary for your component to function properly.

Lifecycle of ReactJS Component

Mounting

In ReactJS, Mounting is the first phase of the component lifecycle. It is the process of creating a new component instance and inserting it into the DOM. The Mounting phase has the following methods:

constructor(): This is the first method called during the Mounting phase. It is used for initializing the state of the component and binding methods to it.
getDerivedStateFromProps(): This method is called after the constructor(). It is used to update the state of the component based on the props received from the parent component.
render(): This method is called after getDerivedStateFromProps(). It is used to render the component to the DOM. It returns a tree of React elements that will be rendered to the DOM.
componentDidMount(): This is the last method called during the Mounting phase. It is used for making API calls, setting up event listeners, and performing any other actions that require the component to be in the DOM.

Constructor() – is called before anything else initialized in a component. It is called along with props, as arguments. You should always call super(props) as it initialize parent’s constructor methods and props and allow the component to inherit methods from its parent (React.Component).

class Tutorial extends React.Component {
  constructor(props) {
    super(props);
    this.state = {tutorial: "ReactJS"};
  }
  render() {
    return (
      <h1>I am learning {this.state.tutorial}</h1>
    );
  }
}

ReactDOM.render(<Tutorial />, document.getElementById('root'));

getDerivedStateFromProps – This method is called just before rendering any element(s) in the React DOM. It accept state as an argument, and returns an object with changes to the state.

Tutorial.js

import React, { Component } from "react";

class Tutorial extends React.Component {
    constructor(props) {
      super(props);
      this.state = {tutorial_name: "PHP & MySQL"};
    }
    static getDerivedStateFromProps(props, state) {
      return {tutorial_name: props.new_tutorial};
    }
    render() {
      return (
        <h1>My Favorite Color is {this.state.tutorial_name}</h1>
      );
    }
  }
  
export default Tutorial;

index.js

import React from "react";
import ReactDOM from "react-dom";

import Tutorial from './Tutorial';

//Rendering component...
ReactDOM.render(<Tutorial new_tutorial="ReactJS Online Share Query."/>, document.getElementById('root'));

render()

The render() method is the only mandatory method in ReactJS. It actually results the HTML to the DOM.

import React from "react";
import ReactDOM from "react-dom";

class Tutorial extends React.Component {
    render() {
      return (
        <h1>I am learning ReactJS from Share Query.</h1>
      );
    }
  }

//Rendering component...
ReactDOM.render(<Tutorial/>, document.getElementById('root'));

componentDidMount: componentDidMount() is invoked immediately after a component is rendered(inserted into the tree). Initialization that requires DOM nodes should go here.

import React from "react";
import ReactDOM from "react-dom";

class Tutorial extends React.Component {
    constructor(props) {
      super(props);
      this.state = {tutorial: "ReactJS"};
    }
    componentDidMount() {
      setTimeout(() => {
        this.setState({tutorial: "PHP & MySQL"})
      }, 1000)
    }
    render() {
      return (
        <h1>I am learning {this.state.tutorial}</h1>
      );
    }
  }

//Rendering component...
ReactDOM.render(<Tutorial/>, document.getElementById('root'));

Share on Facebook

Save