21 The three phases

1. RENDER   — React calls your component function.
              It returns a plain object tree (React elements), not DOM.
              Must be pure. Interruptible: React may pause, restart, or throw it away.

2. RECONCILE— Diff the new element tree against the current fiber tree.
              Produce a list of effects: insert / update / delete this node.

3. COMMIT   — Synchronous and uninterruptible:
              a. apply DOM mutations
              b. run useLayoutEffect cleanups, then useLayoutEffect bodies  ← blocks paint
              c. browser paints
              d. run useEffect cleanups, then useEffect bodies             ← after paint

22 State lives at a position, not in a component

React identifies a component by where it sits in the tree plus its type. Same position + same type means the same state, no matter what changed.

// State is PRESERVED — same type, same position, only props changed
{isEditing ? <Input value={draft} /> : <Input value={saved} />}

// State is DESTROYED — different type at that position, subtree unmounts
{isEditing ? <Input /> : <TextArea />}

// State is DESTROYED on purpose — key changes identity
<Profile key={userId} userId={userId} />

That last line is the idiomatic answer to "how do I reset state when a prop changes". You do not need an effect for it.

function Parent() {
  function Child() { return <input />; }   // new type every render — bug
  return <Child />;
}

23 Keys are identity, not order

Within a list of siblings, the key tells React "this is the same item as before". Using the array index tells React "the item in slot 2 is the same item as whatever used to be in slot 2" — which is false the moment you insert, delete, or sort.

{items.map((item, i) => <Row key={i}       item={item} />)}   // breaks on reorder
{items.map((item)    => <Row key={item.id} item={item} />)}   // correct

The symptom is distinctive: text content updates correctly, but anything React does not control — the value typed into an uncontrolled input, scroll position, CSS transition state, focus — sticks to the wrong row.

24 setState schedules; it does not assign

function Counter() {
  const [count, setCount] = useState(0);   // 'count' is a const for THIS render

  function handleClick() {
    setCount(count + 1);   // count is 0 → queue "set to 1"
    setCount(count + 1);   // count is STILL 0 → queue "set to 1"
    console.log(count);    // 0 — nothing has changed yet
  }                        // result: 1

  function handleClickFixed() {
    setCount(c => c + 1);  // queue "add 1 to whatever is pending"
    setCount(c => c + 1);
  }                        // result: 2
}

React batches all state updates triggered in the same tick into a single re-render. Since React 18 this applies everywhere — event handlers, setTimeout, promise callbacks, native listeners — not only React event handlers.

25 Immutability is a comparison contract

React decides whether to re-render by running Object.is(prev, next). Mutating an object keeps its reference identical, so React concludes nothing changed.

// invisible to React — same reference
todos.push(newTodo);   setTodos(todos);
user.name = 'ada';     setUser(user);

// correct
setTodos([...todos, newTodo]);
setUser({ ...user, name: 'ada' });
setTodos(todos.map(t => t.id === id ? { ...t, done: true } : t));

26 Do not store what you can compute

// antipattern: two sources of truth, one render behind
const [items, setItems]       = useState([]);
const [filtered, setFiltered] = useState([]);
useEffect(() => { setFiltered(items.filter(matches)); }, [items, query]);

// correct: derive during render
const [items, setItems] = useState([]);
const [query, setQuery] = useState('');
const filtered = items.filter(i => i.name.includes(query));   // just compute it
// wrap in useMemo only if profiling shows the filter is actually expensive

27 The setup / cleanup pair

useEffect(() => {
  const conn = createConnection(serverUrl, roomId);   // setup
  conn.connect();
  return () => conn.disconnect();                     // cleanup
}, [serverUrl, roomId]);

Read it as: "while this component is mounted with these values, a connection to that room should exist." When a dependency changes, React runs the cleanup for the old values, then setup for the new ones. Unmount runs cleanup once more.

The dependency array is not a schedule. It is a declaration of everything reactive the effect reads. You cannot choose it — the linter computes it. If the array feels wrong, the effect is wrong: move code inside, extract a stable function outside the component, or use useEffectEvent for the non-reactive part.

28 Every fetch in an effect is a race

Request for id=1 is slow, user clicks id=2, response 2 arrives, then response 1 lands and overwrites it. The UI now shows the wrong user with no error anywhere.

useEffect(() => {
  let stale = false;
  const ctrl = new AbortController();

  fetch(`/api/users/${id}`, { signal: ctrl.signal })
    .then(r => r.json())
    .then(data => { if (!stale) setUser(data); })
    .catch(err => { if (err.name !== 'AbortError' && !stale) setError(err); });

  return () => { stale = true; ctrl.abort(); };
}, [id]);

29 Why your effect loops forever

function Search({ limit }) {
  const options = { limit };                       // new object every render

  useEffect(() => {
    load(options).then(setResults);                // setResults → re-render
  }, [options]);                                   // new identity → effect re-runs → loop
}

Fixes, in order of preference:

1. Move the object inside the effect and depend on the primitive: useEffect(() => { load({ limit }) }, [limit])
2. Move it outside the component entirely if it is constant.
3. Only then: const options = useMemo(() => ({ limit }), [limit])

30 The React Compiler changes the calculus

The React Compiler (shipped alongside React 19) analyses your components at build time and inserts memoization automatically, based on which values actually flow where. On a compiled codebase, most hand-written useMemo / useCallback / React.memo becomes redundant.

Two things this does not change:

• Your components must follow the Rules of React — pure render, no mutation of props or state, hooks called unconditionally at the top level. The compiler bails out (safely) on code it cannot prove is safe, and eslint-plugin-react-hooks tells you where.
• It memoizes; it does not fix an O(n²) algorithm or an over-broad context. Architecture still matters.

31 Context is injection, not a state manager

When a provider's value changes identity, every consumer re-renders, no matter which part of the value it reads.

// every consumer re-renders on every Parent render — the object is new each time
<AppCtx.Provider value={{ user, theme, setUser }}>

// better: stabilise
const value = useMemo(() => ({ user, theme, setUser }), [user, theme]);

// best: split by change frequency. dispatch from useReducer is referentially stable,
// so components that only dispatch never re-render when state changes.
<StateCtx.Provider value={state}>
  <DispatchCtx.Provider value={dispatch}>{children}</DispatchCtx.Provider>
</StateCtx.Provider>

The other lever is composition. An element passed as children is created by the parent, so it keeps its identity when the wrapper re-renders:

function Panel({ children }) {
  const [open, setOpen] = useState(false);
  return <div>{open && children}</div>;   // 'children' does not re-render when 'open' changes
}

32 Transitions: marking updates as interruptible

const [query, setQuery]     = useState('');
const [results, setResults] = useState([]);
const [isPending, startTransition] = useTransition();

function onChange(e) {
  setQuery(e.target.value);                    // urgent — the input must feel instant
  startTransition(() => {
    setResults(searchLargeList(e.target.value)); // non-urgent — can be interrupted
  });
}

If the user types another character mid-render, React throws away the in-progress result list and starts again with the newer value. Without a transition, the expensive render blocks the keystroke.

useDeferredValue is the same idea expressed as a value rather than a callback — useful when you do not own the setState call:

const deferredQuery = useDeferredValue(query);
const results = useMemo(() => searchLargeList(deferredQuery), [deferredQuery]);

33 Suspense: loading states as tree structure

<Suspense fallback={<PageSkeleton />}>
  <Profile />
  <Suspense fallback={<FeedSkeleton />}>
    <Feed />          {/* streams in later without holding up Profile */}
  </Suspense>
</Suspense>

A component "suspends" when it reads a resource that is not ready; React shows the nearest boundary's fallback and retries when it resolves. Combined with streaming SSR, the server sends the shell immediately and flushes each boundary's HTML as its data resolves.

34 Server Components and the client boundary

Server Components run only on the server. They ship no JavaScript to the browser — only their rendered output — and can await data directly.

// app/users/page.tsx — a Server Component (the default in an RSC framework)
export default async function Page() {
  const users = await db.user.findMany();   // no useEffect, no loading state, no API route
  return <UserList users={users} />;
}

// UserList.tsx
'use client';                       // everything imported from here down is client code
import { useState } from 'react';

export function UserList({ users }) {
  const [q, setQ] = useState('');   // hooks require the client
  return /* ... */;
}

• 'use client' marks a boundary, not a file-by-file toggle. Push it as far down the tree as you can.
• Only serializable values cross the boundary: primitives, plain objects, arrays, Dates, Maps, Sets, promises, JSX — not arbitrary functions or class instances.
• Server Actions ('use server') are the one exception: a function reference that the client can call, which executes on the server.

'use client';
import { useActionState } from 'react';

function NameForm({ saveName }) {                 // saveName is a Server Action
  const [state, formAction, pending] = useActionState(saveName, null);
  return (
    <form action={formAction}>
      <input name="name" />
      <button disabled={pending}>Save</button>
      {state?.error && <p role="alert">{state.error}</p>}
    </form>
  );
}

Related React 19 additions worth knowing: useOptimistic for instant UI that reconciles when the action settles, useFormStatus for pending state in a nested submit button, use() for reading a promise or context, ref as a plain prop, and automatic hoisting of <title> / <meta> / stylesheets rendered anywhere in the tree.