React Component Lifecycle

by
Previous
Next

The React Component Lifecycle is the series of methods that are called at different stages of a component’s existence in the application.

React component lifecycle, breaking down the main phases: Mounting, Updating and Unmounting. Examples are included to demonstrate practical usage.

Overview of the React Component Lifecycle

React components, particularly class components, go through a series of stages from their initial creation to when they are removed from the DOM. The component lifecycle is divided into three main phases:

  • Mounting: When the component is first created and added to the DOM.
  • Updating: When the component updates as a result of changes in props or state.
  • Unmounting: When the component is removed from the DOM.

Each of these phases includes specific lifecycle methods that developers can override to execute code at key points during the component’s lifecycle.

Mounting Phase

The mounting phase occurs when a component instance is created and inserted into the DOM. The lifecycle methods in this phase include:

  • constructor(props)
  • static getDerivedStateFromProps(props, state)
  • render()
  • componentDidMount()

a) constructor(props)

The constructor method is the first method called in the mounting phase. It’s used to initialize the component’s state and bind event handlers.

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

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

b) static getDerivedStateFromProps(props, state)

This static method is rarely used but is useful for updating the component’s state in response to changes in props. It’s called right before rendering, and returns an object that updates the state or null if no changes are needed.

static getDerivedStateFromProps(props, state) {
  if (props.reset) {
    return { count: 0 };
  }
  return null;
}

c) render()

The render() method is essential and must be implemented in every React class component. It returns the JSX that represents the UI of the component.

d) componentDidMount()

The componentDidMount method is called immediately after the component is added to the DOM. It’s frequently used for tasks like data fetching, initializing subscriptions or setting up timers.

componentDidMount() {
  this.timer = setInterval(() => this.setState({ count: this.state.count + 1 }), 1000);
}

In this example:

  • A timer is set up to update the count every second.

Updating Phase

The updating phase occurs whenever the component’s state or props change, leading to a re-render. The lifecycle methods in this phase are:

  • static getDerivedStateFromProps(props, state)
  • shouldComponentUpdate(nextProps, nextState)
  • render()
  • getSnapshotBeforeUpdate(prevProps, prevState)
  • componentDidUpdate(prevProps, prevState, snapshot)

a) shouldComponentUpdate(nextProps, nextState)

This method is used to optimize rendering by returning false to prevent unnecessary updates. It’s called before render() when state or props change.

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

In this example:

  • The component only re-renders if the count state has changed.

b) getSnapshotBeforeUpdate(prevProps, prevState)

This method captures the state of the DOM right before it updates, allowing you to save information (like scroll position) that you can use after the update.

getSnapshotBeforeUpdate(prevProps, prevState) {
  if (prevState.count < this.state.count) {
    return this.list.scrollHeight;
  }
  return null;
}

c) componentDidUpdate(prevProps, prevState, snapshot)

This method is called after the component re-renders and updates the DOM. You can use it to handle operations like network requests based on the component’s updated state.

componentDidUpdate(prevProps, prevState, snapshot) {
  if (snapshot !== null) {
    console.log("Previous scroll height:", snapshot);
  }
}

Unmounting Phase

The unmounting phase is the last stage in a component’s lifecycle, occurring right before the component is removed from the DOM. The primary method here is:

  • componentWillUnmount()

componentWillUnmount()

This method is used for cleanup tasks, such as clearing timers, canceling network requests or removing event listeners.

class TimerComponent extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

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

In this example:

  • componentWillUnmount clears the timer when the component is removed to prevent memory leaks.

React Component Lifecycle Diagram

To visualize the React component lifecycle, consider a diagram that shows the flow of methods during each phase. This diagram can help you understand the sequence of calls, making it easier to plan for tasks like data fetching, DOM manipulation or cleanup.

Practical Usage of Lifecycle Methods

By combining these lifecycle methods, developers can build highly optimized and interactive components. Here’s a sample component that uses multiple lifecycle methods:

class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.state = { user: null, error: null };
  }

  componentDidMount() {
    fetch(`https://api.example.com/user/${this.props.userId}`)
      .then(response => response.json())
      .then(data => this.setState({ user: data }))
      .catch(error => this.setState({ error }));
  }

  componentDidUpdate(prevProps) {
    if (prevProps.userId !== this.props.userId) {
      this.setState({ user: null, error: null });
      this.fetchUser();
    }
  }

  componentWillUnmount() {
    console.log("Cleaning up UserProfile component");
  }

  render() {
    if (this.state.error) return <p>Error loading user profile.</p>;
    if (!this.state.user) return <p>Loading...</p>;
    return <div>{this.state.user.name}</div>;
  }
}

In this example:

  • componentDidMount fetches user data when the component is first added to the DOM.
  • componentDidUpdate re-fetches user data if the userId prop changes.
  • componentWillUnmount logs a message when the component is removed.

Modern Alternatives: Using Hooks for Lifecycle Events

In modern React development, functional components with hooks have become popular. Hooks like useEffect can perform the same tasks as lifecycle methods, making the code cleaner and more modular.

import React, { useState, useEffect } from "react";

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    let isMounted = true;
    fetch(`https://api.example.com/user/${userId}`)
      .then(response => response.json())
      .then(data => isMounted && setUser(data));

    return () => {
      isMounted = false;
    };
  }, [userId]);

  return <div>{user ? user.name : "Loading..."}</div>;
}

Previous
Next

Leave a Comment