What are the lifecycle methods of a React component?

In React, lifecycle methods are hooks that allow you to run code at specific points in a component’s lifecycle: when the component is created (mounted), updated, or destroyed (unmounted). These methods are mostly used in class components, though you can achieve similar results with hooks in functional components.

1. Mounting

• When the component is being added to the DOM for the first time.
• Methods:
  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()

Example of Mounting:

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
    console.log('Constructor: Component is being initialized');
  }

  static getDerivedStateFromProps(props, state) {
    console.log('getDerivedStateFromProps: Sync state with props');
    return null; // Return new state or null
  }

  componentDidMount() {
    console.log('componentDidMount: Component is mounted in the DOM');
    // Simulate an API call
    setTimeout(() => {
      this.setState({ data: 'Fetched Data' });
    }, 1000);
  }

  render() {
    console.log('Render: Component rendering');
    return (
      <div>
        <h1>{this.state.data || 'Loading...'}</h1>
      </div>
    );
  }
}

export default ExampleComponent;

Output:

Constructor: Component is being initialized
getDerivedStateFromProps: Sync state with props
Render: Component rendering
componentDidMount: Component is mounted in the DOM

2. Updating

• When the component is re-rendered due to state or prop changes.
• Methods:
  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

Example of Updating:

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

  static getDerivedStateFromProps(props, state) {
    console.log('getDerivedStateFromProps: Updating state from props');
    return null;
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log('shouldComponentUpdate: Decide if re-render is necessary');
    return true; // Re-render every time
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('getSnapshotBeforeUpdate: Capture snapshot before DOM is updated');
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('componentDidUpdate: DOM has been updated');
  }

  handleIncrement = () => {
    this.setState({ counter: this.state.counter + 1 });
  };

  render() {
    console.log('Render: Updating component');
    return (
      <div>
        <h1>Counter: {this.state.counter}</h1>
        <button onClick={this.handleIncrement}>Increment</button>
      </div>
    );
  }
}

export default ExampleComponent;

Output on clicking Increment:

getDerivedStateFromProps: Updating state from props
shouldComponentUpdate: Decide if re-render is necessary
Render: Updating component
getSnapshotBeforeUpdate: Capture snapshot before DOM is updated
componentDidUpdate: DOM has been updated

3. Unmounting

• When the component is removed from the DOM.
• Method:
  • componentWillUnmount()

Example of Unmounting:

class ExampleComponent extends React.Component {
  componentWillUnmount() {
    console.log('componentWillUnmount: Component is being removed from the DOM');
  }

  render() {
    return <h1>Unmount me!</h1>;
  }
}

export default ExampleComponent;

Output when the component is unmounted:

componentWillUnmount: Component is being removed from the DOM

4. Error Handling

• Catching errors during rendering, lifecycle methods, and in the constructor of child components.
• Methods:
  • static getDerivedStateFromError()
  • componentDidCatch()

Example of Error Handling:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    console.log('getDerivedStateFromError: Error detected');
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.log('componentDidCatch: Error caught');
    console.error(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

In this example, if a child component throws an error, ErrorBoundary will display the fallback UI.

These lifecycle methods allow you to control how your component behaves at each stage of its life, ensuring proper resource management, data fetching, and error handling.