Component Lifecycle

Introduction

Every component in a React application is born, exists on the screen for a while reacting to changes, and eventually disappears. React calls these three stages the component lifecycle, and understanding them is essential for knowing exactly when your code runs — when to fetch data, when to set up a subscription, and when to clean it up before the component disappears.

In modern React, function components express all three lifecycle phases through Hooks, primarily useEffect. This lesson walks through each phase individually, shows how useEffect maps onto them, and — because you will likely encounter older codebases — compares this to the class-based lifecycle methods React used before Hooks existed.

The Three Lifecycle Phases

Regardless of whether a component is written as a function or a class, it always passes through the same three conceptual stages during its life on the screen.

Mounting

Mounting happens exactly once: the first time a component appears on the screen. This is the ideal moment to run one-time setup code, like fetching initial data or starting a subscription. In a function component, an empty dependency array tells useEffect to run its function only after this first render.

import { useEffect, useState } from "react";

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

  useEffect(() => {
    console.log("Component mounted — fetching user data");
    fetchUser(userId).then(setUser);
  }, []); // empty array = runs once, after the first render

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

Component mounted — fetching user data   (logged exactly once)

Updating

Updating happens every time a component re-renders because its props or state changed. If you include a value in useEffect's dependency array, the effect re-runs whenever that specific value changes — this is how you react to updates without re-running setup logic on every single render.

useEffect(() => {
  console.log("userId changed — re-fetching user data");
  fetchUser(userId).then(setUser);
}, [userId]); // reruns whenever userId changes

userId changed — re-fetching user data
(logged again each time the userId prop changes to a new value)

Unmounting

Unmounting happens when a component is removed from the screen — for example, when the user navigates away from the page it lives on. This is the moment to clean up anything that would otherwise keep running or leak memory, like a timer, a WebSocket connection, or an event listener. In a function component, this cleanup is handled by the function you optionally return from inside useEffect.

useEffect(() => {
  const timer = setInterval(() => {
    console.log("tick");
  }, 1000);

  // This cleanup function runs when the component unmounts
  return () => {
    console.log("Component unmounting — clearing timer");
    clearInterval(timer);
  };
}, []);

tick
tick
tick
Component unmounting — clearing timer   (logged when the component is removed)

The Full Picture

Putting all three phases together in one component makes the pattern clear: setup happens on mount, react-to-changes logic happens on update, and cleanup happens on unmount — all expressed through the same useEffect Hook.

useEffect(() => {
  console.log("Mounted or userId changed — subscribing");
  const subscription = subscribeToUser(userId, setUser);

  return () => {
    console.log("Cleaning up before next effect or unmount");
    subscription.unsubscribe();
  };
}, [userId]);

Comparison to Class Lifecycle Methods

Before Hooks existed, this same behavior was expressed using named lifecycle methods on class components. You may still encounter these in legacy codebases, so it helps to know how they map onto the Hooks you just learned.

class UserProfile extends React.Component {
  componentDidMount() {
    console.log("Component mounted");
    fetchUser(this.props.userId).then((user) => this.setState({ user }));
  }

  componentDidUpdate(prevProps) {
    if (prevProps.userId !== this.props.userId) {
      console.log("userId changed");
      fetchUser(this.props.userId).then((user) => this.setState({ user }));
    }
  }

  componentWillUnmount() {
    console.log("Component unmounting");
  }

  render() {
    return <div>{this.state.user ? this.state.user.name : "Loading..."}</div>;
  }
}

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Every React component moves through the same three-phase lifecycle: mounting, updating, and unmounting. Function components express all three through useEffect and its dependency array and cleanup function, replacing what used to require three separate named methods on a class.

In this lesson, you walked through each lifecycle phase individually, saw how they combine in a single effect, and compared the Hooks approach to the older class lifecycle methods. Next, you will learn about the Context API, which solves the problem of passing data through many layers of components.