useEffect() detail explanation

useEffect(() => {
  console.log("Effect starts");

  return () => {
    console.log("Cleanup runs");
  };
}, [dep]);

Render #1
 └─ Effect #1 runs

Render #2 (dep changed)
 ├─ Cleanup from Effect #1 runs
 └─ Effect #2 runs

Component unmount
 └─ Cleanup from last effect runs

Component mounts with searchTerm = "c"
────────────────────────────────────────────────────────────
Render #1
  useEffect #1 runs
    cancelled₁ = false
    start async #1 → fetch /api?q=c
  cleanup for previous effect? (none on mount)

(time passes… user types)

searchTerm changes to "ca"
────────────────────────────────────────────────────────────
Render #2
  BEFORE running the new effect, React runs cleanup for the previous one:
    cleanup of useEffect #1 → set cancelled₁ = true  (invalidate old effect)

  Now run the new effect body:
    useEffect #2 runs
      cancelled₂ = false
      start async #2 → fetch /api?q=ca

(time passes… network completes out of order)

Async #1 (for "c") finishes LATE
  async #1 reads cancelled₁ === true  → DO NOTHING (skip setResults)

Async #2 (for "ca") finishes
  async #2 reads cancelled₂ === false → setResults(data for "ca") ✅ correct

────────────────────────────────────────────────────────────
Outcome: Only the latest effect (for "ca") is allowed to update state.
Older effects see their own 'cancelled' flag and gracefully bail out.