Understanding React Component Life Cycle: A Comprehensive Guide with Examples

Introduction to React Component Life Cycle

In React, every component goes through a series of phases during its lifetime, known as the Component Life Cycle. Understanding these phases is crucial for building robust React applications. In this tutorial, we’ll explore each stage of the React Component Life Cycle with clear explanations and code examples.

1. Initialization

The first phase in the life cycle of a React component is the initialization. During this phase, the component is set up, and its initial state and properties are defined.

import React, { Component } from 'react';

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

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

export default MyComponent;

2. Mounting

The mounting phase occurs when the component is being inserted into the DOM. There are three key methods associated with mounting:

• componentWillMount(): Executed just before rendering, both on the client and server side.
• render(): Responsible for rendering the component.
• componentDidMount(): Executed after the component is rendered to the DOM.

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    // Fetch data, setup timers, etc.
  }

  render() {
    return (
      <div>
        <p>Component Mounted!</p>
      </div>
    );
  }
}

export default MyComponent;

3. Updating

The updating phase occurs whenever a component’s state or props change. Key methods associated with updating include:

• componentWillReceiveProps(nextProps): Executed when the component receives new props.
• shouldComponentUpdate(nextProps, nextState): Determines if the component should re-render.
• componentWillUpdate(nextProps, nextState): Executed just before rendering, after shouldComponentUpdate returns true.
• render(): Renders the updated component.
• componentDidUpdate(prevProps, prevState): Executed after the component is re-rendered.

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidUpdate(prevProps, prevState) {
    // Perform side-effects based on prop/state changes
  }

  render() {
    return (
      <div>
        <p>Updated Count: {this.state.count}</p>
      </div>
    );
  }
}

export default MyComponent;

4. Unmounting

The unmounting phase occurs when a component is removed from the DOM. The key method associated with unmounting is:

• componentWillUnmount(): Executed just before the component is unmounted and destroyed.

import React, { Component } from 'react';

class MyComponent extends Component {
  componentWillUnmount() {
    // Clean up resources (e.g., timers, event listeners)
  }

  render() {
    return (
      <div>
        <p>Component Will Unmount</p>
      </div>
    );
  }
}

export default MyComponent;

Conclusion

By mastering the React Component Life Cycle, you gain precise control over how your components behave at each stage of their existence. Leveraging these life cycle methods allows you to optimize performance, manage resources efficiently, and create a more responsive user experience in your React applications.