mediumFrontend

Describe the React component lifecycle.

Q: Describe the React component lifecycle.

**Core concept (TL;DR).** A component passes through three phases: **mounting** (added to the DOM), **updating** (re-rendered due to prop/state changes), and **unmounting** (removed). In function components these map to useEffect — the effect body runs on mount/update, and the returned cleanup runs before the next effect and on unmount. Mount → Update(s) → Unmount Mount <text x="90" y="89" fill="currentColor

1.0k views

Understand the problem

Crucial for understanding how components behave over time, especially with class components or useEffect.

lifecyclemountingupdatingunmounting

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Mount, update, and unmount with one effect

import { useState, useEffect } from "react";

function Child({ id }) {
  useEffect(() => {
    console.log("mount/update for id", id);   // runs on mount + when id changes
    return () => console.log("cleanup for id", id); // before next run + on unmount
  }, [id]);
  return <p>Item {id}</p>;
}

export default function App() {
  const [id, setId] = useState(1);
  const [shown, setShown] = useState(true);
  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      {shown && <Child id={id} />}
      <button onClick={() => setId((n) => n + 1)}>Update id</button>
      <button onClick={() => setShown((s) => !s)}>Mount/Unmount</button>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

Explain the concept of reconciliation in React.

Explain the concept of 'composition' in React components.