React Life Cycle Method

Introduction: The React Lifecycle is like the heartbeat of a React application, guiding its flow and behavior. Without understanding this essential process, diving deep into React can feel like exploring a maze without a map. Fear not! Let's simplify this vital aspect of React into a fun and memorable journey.

The 3-Step Dance: React Lifecycle

1. Mounting

Welcoming Our Components Imagine your React app as a treehouse, and Mounting is the process of bringing in a new friend to your treehouse party. When a component is mounted, it's like welcoming a guest into your cozy, virtual home, aka the Document Object Model (DOM).

Fun Example: Picture yourself setting up a brand-new board game for your guest. You lay out the board, set up the pieces, and voila! The game is ready for action. Similarly, in React Mounting, you prepare your component, set its initial state, and get it ready for the fun ahead.

There are four methods that are part of the mounting phase:

1. constructor(props): This is where you initialize the component's state and bind methods to the component's instance.

2. static getDerivedStateFromProps(nextProps, prevState): This method exists for rare use cases where the state depends on changes in props over time.

3. render(): This method returns the necessary elements to be rendered to the DOM.

4. componentDidMount(): This method is called after the component is rendered and inserted into the DOM. This is where you would make any necessary API calls or set up any event listeners.

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

  componentDidMount() {
    console.log('Component mounted!');
  }

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

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

2 .Updation

The updating phase is when a component's state or props change, causing the component to re-render. There are three methods in this phase:

1. shouldComponentUpdate(nextProps, nextState): This method is used to optimize rendering by allowing the component to decide whether to re-render or not. It returns a boolean value, with true indicating that the component should re-render and false indicating that it should not.

    class ExampleComponent extends React.Component {
      shouldComponentUpdate(nextProps, nextState) {
        return nextState.count !== this.state.count;
      }
   
      handleClick() {
        this.setState({ count: this.state.count + 1 });
      }
   
      render() {
        return (
          <div>
            <p>Count: {this.state.count}</p>
            <button onClick={this.handleClick.bind(this)}>Increment</button>
          </div>
        );
      }
    }
   

2. getSnapshotBeforeUpdate(prevProps, prevState): This method is used to capture any information from the DOM that might be needed before the update occurs. It returns a value that will be passed as the third argument to componentDidUpdate().

    class ChatList extends React.Component {
      getSnapshotBeforeUpdate(prevProps, prevState) {
        if (this.state.chatList > prevState.chatList) {
          const chatThreadRef = this.chatThreadRef.current;
          return chatThreadRef.scrollHeight - chatThreadRef.scrollTop;
        }
        return null;
      }
   
      componentDidUpdate(prevProps, prevState, snapshot) {
        if (snapshot !== null) {
          const chatThreadRef = this.chatThreadRef.current;
          chatThreadRef.scrollTop = chatThreadRef.scrollHeight - snapshot;
        }
      }
   
      render() {
        return (
          <div ref={ref => (this.chatThreadRef = ref)}>
            {this.props.chatList.map(chat => (
              <div key={chat.id}>{chat.message}</div>
            ))}
          </div>
        );
      }
    }
   

3. componentDidUpdate(prevProps, prevState, snapshot): This method is called immediately after the component has been updated and re-rendered. It is useful for performing side effects or additional operations when the component's props or state have changed.

    class ExampleComponent extends React.Component {
      componentDidUpdate(prevProps, prevState) {
        if (this.state.count > prevState.count) {
          console.log("Count has been updated:", this.state.count);
        }
      }
   
      handleClick() {
        this.setState({ count: this.state.count + 1 });
      }
   
      render() {
        return (
          <div>
            <p>Count: {this.state.count}</p>
            <button onClick={this.handleClick.bind(this)}>Increment</button>
          </div>
        );
      }
    }
   

3.Unmounting

The unmounting phase is the third and final phase of a React component. At this phase, the component is removed from the DOM. Unmounting only has one lifecycle method involved: componentWillUnmount().

Now let's imagine that our magical plant has grown too big for our treehouse party, and it's time to say goodbye. The componentWillUnmount() method is like a gardener who carefully removes the plant from the garden and disposes of it properly.

Here's an example of how to use componentWillUnmount() to clean up after a component:

class Plant extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      size: 1
    };
  }

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

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

  render() {
    return (
      <div>
        <p>Size: {this.state.size}</p>
      </div>
    );
  }
}