React.Js Lifecycle Methods

What is React Js: 

React.js is a JavaScript library for building user interfaces. It was developed by Facebook and is now maintained by a community of developers. React allows developers to build reusable UI components, which can be easily composed to create complex user interfaces.

React uses a virtual DOM (Document Object Model) to update the UI efficiently. The virtual DOM is a lightweight representation of the actual DOM, which React uses to calculate the changes that need to be made to the actual DOM. This approach improves the performance of applications built with React, as it avoids unnecessary updates and re-renders of the entire UI.

React Component Lifecycle:

In React, a component goes through different phases in its lifecycle, and at certain points in each phase, React will call specific methods on the component. These methods are known as lifecycle methods.

Here are some of the main lifecycle methods in React:

• componentDidMount(): This method is called after the component has been added to the DOM. It’s a good place to make API calls or set up subscriptions.
• componentDidUpdate(prevProps, prevState): This method is called after the component has updated. It receives the previous props and state as arguments. It’s a good place to make API calls or set up subscriptions based on the updated props or state.
• componentWillUnmount(): This method is called before the component is removed from the DOM. It’s a good place to clean up any resources or subscriptions.
• shouldComponentUpdate(nextProps, nextState): This method is called before the component updates. It receives the next props and state as arguments. It should return a boolean value, indicating whether the component should update.

These methods are used to perform some specific actions at different stages of the component’s life-cycle. These methods allow developers to run some code at specific points during the process of rendering and updating a component, such as fetching data, setting up subscriptions, and cleaning up resources.

 

componentDidMount() :

componentDidMount() is a lifecycle method in React that is called after a component has been added to the DOM. It’s a good place to make API calls or set up subscriptions since the component is guaranteed to have been rendered and has access to the DOM.

Here’s an example of how you might use componentDidMount() to make an API call and set the data to the component’s state:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return (
      <div>
        <h1>My Data</h1>
        <ul>
          {this.state.data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

In this example, the componentDidMount() method is used to make an API call to fetch some data when the component is first added to the DOM. The data is then stored in the component’s state and used to render a list of items.

It’s important to note that componentDidMount() will only be called once in the lifecycle of a component. This makes it a good place to perform any setup that only needs to happen once, such as fetching data or setting up subscriptions.

 

componentDidUpdate() :

componentDidUpdate() is a lifecycle method in React that is called after a component has been updated and re-rendered. It receives the previous props and state as arguments, which allows you to compare the current and previous data and perform some actions based on the changes.

Here’s an example of how you might use componentDidUpdate() to make an API call when a certain prop changes:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  componentDidUpdate(prevProps) {
    if (this.props.id !== prevProps.id) {
      fetch(`https://api.example.com/data/${this.props.id}`)
        .then(response => response.json())
        .then(data => this.setState({ data }));
    }
  }

  render() {
    return (
      <div>
        <h1>My Data</h1>
        <ul>
          {this.state.data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

In this example, the componentDidUpdate() method is used to check if the id prop has changed since the last render, and if it has, it makes an API call to fetch new data. The new data is then stored in the component’s state and used to re-render the list of items.

It’s important to note that making any state updates inside componentDidUpdate() can cause a re-render of the component, which can lead to an infinite loop. To avoid this, you should always compare the current and previous props and state before making any updates.

 

componentWillUnmount() :

componentWillUnmount() is a lifecycle method in React that is called before a component is removed from the DOM. It’s a good place to clean up any resources or subscriptions that were set up in componentDidMount().

Here’s an example of how you might use componentWillUnmount() to clean up a setInterval:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      time: 0
    };
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState(prevState => ({ time: prevState.time + 1 }));
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return <div>Time: {this.state.time}</div>;
  }
}

In this example, the componentDidMount() method is used to set up an interval that updates the component’s state every second. The componentWillUnmount() method is used to clean up the interval when the component is removed from the DOM.

It’s important to note that componentWillUnmount() will only be called once in the lifecycle of a component, right before it is removed from the DOM, this makes it a good place to perform any cleanup that needs to happen once, such as clearing intervals, event listeners, and other resources.

 

shouldComponentUpdate() :

shouldComponentUpdate() is a lifecycle method in React that is called before a component updates. It receives the next props and state as arguments, and it should return a boolean value indicating whether the component should update. By default, it returns true, meaning that the component will re-render every time there is a change in its props or state.

Here’s an example of how you might use shouldComponentUpdate() to optimize the performance of a component:

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps) {
    return this.props.data !== nextProps.data;
  }

  render() {
    return <div>{this.props.data}</div>;
  }
}

In this example, the shouldComponentUpdate() method is used to check if the data prop has changed since the last render. If it has, it returns true, which causes the component to re-render with the new data. If it hasn’t changed, it returns false, which prevents the component from re-rendering.

It’s important to note that using shouldComponentUpdate() can improve the performance of your application, by preventing unnecessary re-renders, but it also increases the complexity of your code. It’s important to use it judiciously, and only when you have a good reason to believe that it will have a noticeable impact on performance.