React · Theory

React Component Lifecycle

Theory

18/94

React Component Lifecycle

Three big phases: mount (first appear), update (props/state change), unmount (leave the tree). Class names: componentDidMount, componentDidUpdate, componentWillUnmount. Effects map: useEffect(() => { mount/update work; return cleanup; }, deps).

Empty deps [] ≈ mount + unmount cleanup. [id] ≈ re-run when id changes. Missing deps ≈ run after every paint — easy to create loops if you setState inside.

Board clock: start interval on mount, clearInterval on unmount. Forget cleanup → ghost timers after you leave the page. That story is the lifecycle viva.

React Component Lifecycle — on screen — 0s, 1s, 2s… Leave page → cleanup. componentDidMount ≈ useEffect(() => {}, []).

Diagram

render
      │
      ▼
  useEffect
      │ unmount
      ▼
    cleanup()

Exam tip

Map didMount to useEffect([]). Mention cleanup.

Example

// Lifecycle ≈ useEffect
import { useEffect, useState } from "react";

export default function Clock() {
  const [t, setT] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setT((x) => x + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <p>{t}s</p>;
}

React Component Lifecycle — on screen: 0s, 1s, 2s… Leave page → cleanup. componentDidMount ≈ useEffect(() => {}, []).

Short notes

Phases : mount / update / unmount.
Hooks : useEffect + cleanup.
Trapeffect without cleanup on timers.

React · Theory

React Component Lifecycle

← All stacks

Theory

18/94

React Component Lifecycle

Empty deps [] ≈ mount + unmount cleanup. [id] ≈ re-run when id changes. Missing deps ≈ run after every paint — easy to create loops if you setState inside.

Board clock: start interval on mount, clearInterval on unmount. Forget cleanup → ghost timers after you leave the page. That story is the lifecycle viva.

React Component Lifecycle — on screen — 0s, 1s, 2s… Leave page → cleanup. componentDidMount ≈ useEffect(() => {}, []).

Diagram

render
      │
      ▼
  useEffect
      │ unmount
      ▼
    cleanup()

Exam tip

Map didMount to useEffect([]). Mention cleanup.

Example

// Lifecycle ≈ useEffect
import { useEffect, useState } from "react";

export default function Clock() {
  const [t, setT] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setT((x) => x + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <p>{t}s</p>;
}

React Component Lifecycle — on screen: 0s, 1s, 2s… Leave page → cleanup. componentDidMount ≈ useEffect(() => {}, []).

Short notes

Phases : mount / update / unmount.
Hooks : useEffect + cleanup.
Trapeffect without cleanup on timers.

React Component Lifecycle

Example

Short notes

Questions

React Component Lifecycle

Example

Short notes

Questions