The Project | About Us | Contribute | Donations | License

HOME

React lifecycle methods are special methods that get called at different stages of a component's life in a React application. These methods allow you to hook into specific moments in the component's lifecycle, such as when it is being created, updated, or destroyed. Understanding these methods is crucial for managing side effects, optimizing performance, and ensuring that your components behave as expected.

Key Lifecycle Phases

React components go through several phases during their lifecycle:

Mounting: When a component is being inserted into the DOM.
Updating: When a component is being re-rendered due to changes in props or state.
Unmounting: When a component is being removed from the DOM.

Lifecycle Methods Overview

Mounting Phase

constructor(props)

Called before the component is mounted.
Used for initializing state and binding event handlers.

Example:

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

static getDerivedStateFromProps(props, state)

Called right before rendering the element(s) in the DOM.
Used to update the state based on props.

Example:

static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.someValue !== prevState.someValue) {
    return { someValue: nextProps.someValue };
  }
  return null;
}

render()
- The only required method in a class component.
- Returns the JSX to be rendered.
- Example:
```
render() {
  return <div>{this.state.count}</div>;
}
```
componentDidMount()
- Called after the component is mounted.
- Used for side effects like fetching data or setting up subscriptions.
- Example:
```
componentDidMount() {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => this.setState({ data }));
}
```

Updating Phase

static getDerivedStateFromProps(props, state)
- Also called during the updating phase.
- Same usage as in the mounting phase.
shouldComponentUpdate(nextProps, nextState)
- Called before rendering when new props or state are received.
- Used to optimize performance by preventing unnecessary renders.
- Example:
```
shouldComponentUpdate(nextProps, nextState) {
  return nextState.count !== this.state.count;
}
```
render()
- Called to re-render the component.
getSnapshotBeforeUpdate(prevProps, prevState)
- Called right before the most recently rendered output is committed to the DOM.
- Used to capture some information from the DOM (e.g., scroll position) before it is potentially changed.
- Example:
```
getSnapshotBeforeUpdate(prevProps, prevState) {
  if (prevProps.list.length < this.props.list.length) {
    return this.listRef.scrollHeight;
  }
  return null;
}
```
componentDidUpdate(prevProps, prevState, snapshot)
- Called after the component is updated.
- Used for side effects that need to occur after the DOM has been updated.
- Example:
```
componentDidUpdate(prevProps, prevState, snapshot) {
  if (snapshot !== null) {
    this.listRef.scrollTop = this.listRef.scrollHeight - snapshot;
  }
}
```

Unmounting Phase

componentWillUnmount()
- Called right before the component is unmounted and destroyed.
- Used for cleanup tasks like invalidating timers or canceling network requests.
- Example:
```
componentWillUnmount() {
  clearInterval(this.timerID);
}
```

Practical Example

Let's create a simple counter component that demonstrates the use of some lifecycle methods:

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.increment = this.increment.bind(this);
  }

  componentDidMount() {
    console.log('Component did mount');
  }

  shouldComponentUpdate(nextProps, nextState) {
    return nextState.count !== this.state.count;
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Component did update');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  increment() {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

Exercise

Create a Timer component that starts a timer when the component is mounted and stops the timer when the component is unmounted. The timer should update the state every second to display the elapsed time.

Solution

import React from 'react';

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

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

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

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

export default Timer;

Summary

In this section, we covered the key lifecycle methods in React, including their purposes and how to use them effectively. Understanding these methods is essential for managing side effects, optimizing performance, and ensuring that your components behave as expected. In the next module, we will dive into React Hooks, which provide a more modern and functional approach to managing component state and lifecycle events.

React Lifecycle Methods

Key Lifecycle Phases

Lifecycle Methods Overview

Mounting Phase

Updating Phase

Unmounting Phase

Practical Example

Exercise

Solution

Summary

React Course

Module 1: Introduction to React

Module 2: React Components

Module 3: Working with Events

Module 4: Advanced Component Concepts

Module 5: React Hooks

Module 6: Routing in React

Module 7: State Management

Module 8: Performance Optimization

Module 9: Testing in React

Module 10: Advanced Topics

Module 11: Project: Building a Complete Application