The New Model
Hooks today & the compiler
Lesson 2 of 4
What you'll learn
- Confirm what's unchanged about hooks (and what isn't)
- Stop reaching for useMemo/useCallback — the compiler handles it
- Recognize effects you don't need
Good news: hooks are still the model. useState, useEffect, useRef, the rules (top level, stable order) — all unchanged. Classes are legacy. What changed is the tooling and the culture around them.
The React Compiler memoizes for you
The React Compiler (now stable, on by default in modern Next) analyzes your components and auto-memoizes values and components. The pile of useMemo/useCallback/React.memo you wrote in 2021 to stop re-renders is now mostly dead code you can delete.
// 2021: hand-memoized to avoid recomputing / re-rendering children
const sorted = useMemo(() => sort(items), [items]);
const onPick = useCallback((id) => pick(id), []);
// Now: just write it. The compiler memoizes equivalently.
const sorted = sort(items);
const onPick = (id) => pick(id);
You might not need useEffect
The other shift is cultural. Effects are for synchronizing with external systems (a subscription, a non-React widget, the document title) — not for deriving state or fetching data.
// ❌ deriving state in an effect (a 2021 habit)
const [full, setFull] = useState("");
useEffect(() => setFull(first + " " + last), [first, last]);
// ✅ just compute it during render
const full = first + " " + last;
Data fetching moved too: you fetch on the server in a Server Component, not in a client useEffect.
The trap to unlearn
Most useEffect calls that set state from other state, or fetch on mount, are smells now. If an effect's only job is to compute a value from props/state, delete it and compute inline.
The challenge models what the compiler does: memoize by input identity, recomputing only when inputs actually change. Run it.
Run it. The expensive function only re-runs when its inputs change — what the compiler now does for you.
With the React Compiler on, what should you do with most hand-written useMemo and useCallback calls?
Next: where state actually lives now — server vs. client.
Saved on this device. Sign in to sync your progress everywhere.