React in Depth cheat sheet

• JSX is function calls: a tag becomes jsx(X, { a: "1" }), which returns a plain element object.
• Component names start with a capital. Lowercase makes a DOM tag and your function is never called.
• Return one root (or a fragment). Close every tag. className, htmlFor, onClick. style takes an object.
• true, false, null, undefined render nothing. A plain object as a child is an error.
• Props are read-only and flow down. Events go up: pass a callback prop.

Watch out: {count && ...} renders 0 when count is 0. Write count > 0 && .... Also onClick={f()} calls f during render. Write onClick={f}.

• Render must be pure: same props, state, context give the same JSX, with no changes to outside variables, no fetch, no timers.
• Strict Mode (dev only) calls components twice to expose impurity. Local mutation of things made in this render is fine.
• Lists need a key: stable and unique among siblings, ideally a data ID. Not Math.random(). Index only for static lists.
• Conditional rendering is plain JS: early return, ternary, &&, return null.

render Parent, render Child
ref attached
layoutEffect Child
(browser paints)
effect Child, effect Parent

• Render calls your functions. Commit touches the DOM, only where it differs. A re-render can change nothing.
• A parent render re-renders all children, unless the child is wrapped in memo.
• Same type at the same position keeps state. Different type resets it. key changes identity.

setCount(count + 1); // x3 gives +1
setCount((c) => c + 1); // x3 gives +3
const [v] = useState(
  () => readStorage()); // lazy

• State is a snapshot. The setter queues a render. The variable in your handler does not change.
• Updates are batched into one render, also in timeouts and promises (React 18+).
• Never mutate. Copy: { ...obj, k }, [...arr, x], arr.filter, arr.map. React compares with Object.is.
• Do not store what you can compute. Do not copy props into state. Keep state low, lift only when siblings must agree.

useEffect(() => {
  const c = connect(roomId);
  return () => c.disconnect(); // cleanup
}, [roomId]);

• Effects sync with an outside system. They are not "on mount" or "on update" hooks.
• Strict Mode runs setup, cleanup, setup in dev. Write the cleanup. Never "fix" it with a ref flag.
• Object or function dependencies are new each render, so the effect re-runs. Use primitives.

Watch out: Never silence exhaustive-deps. useLayoutEffect runs before paint: only to measure the DOM.

useRef

Box that does not render. DOM nodes, timer IDs. In 19 ref is a prop

useMemo

Skip a slow calculation. A hint, may be dropped

useCallback

Same function identity. Only helps memo children and deps

useReducer

Many updates, rules in one pure fn. dispatch is stable

useSyncExternalStore

Subscribe to a non-React store safely

use (19)

Read a promise or context. Callable in if. Promise must be stable

useId

Unique, hydration-safe ID for labels

• Rules: top level only, never in conditions, loops, handlers or after an early return. React matches hooks by call order.
• A custom hook (name starts with use) shares logic, not state. Each call has its own.

• onChange fires on every keystroke. Events bubble. stopPropagation stops them. preventDefault stops a submit reload.
• A button in a form submits by default: use type="button" for the rest.
• Controlled: value + onChange, start with "" never undefined. Uncontrolled: defaultValue, read with FormData.
• Validate on the server too. Labels with htmlFor, aria-invalid, aria-describedby, role="alert".

form action={fn}

Calls fn(formData) in a transition

useActionState(fn, init)

[state, formAction, isPending]

useFormStatus()

pending of the parent form (call in a child)

useOptimistic

Temporary value until the real state arrives

Watch out: React 19 resets uncontrolled fields after an action. Return typed values in state and use them as defaultValue.

• fetch does not reject on 404 or 500. Check res.ok and throw. Aborted fetch rejects with AbortError.
• Effect fetching has races, no sharing, no cache, waterfalls. Use TanStack Query, SWR, RTK Query or a framework loader.
• Query key holds everything the function reads: ["user", id]. staleTime (default 0) is how long data is fresh. gcTime (5 min) is how long unused data is kept.
• After a mutation, invalidateQueries to refetch. Retry defaults to 3. Never copy data into state.
• use(promise) + Suspense: promise must be created outside render. Suspense does not remove waterfalls.

• Context re-renders every consumer, even memo ones. Split contexts, memoise the value, put state and dispatch apart.
• Zustand: selector returning a new object each time can loop. Pick narrow slices.

1. Measure first: render counter, Profiler, DevTools. Production build, throttled CPU.
2. A component renders for 3 reasons: first time, own state or context, parent rendered.
3. Cheapest fix: move state down, or pass heavy parts as children.
4. memo + stable props (useCallback). One inline function defeats memo (15 renders, 0 when fixed).
5. Long lists: virtualise (50,006 DOM nodes became 115). Heavy code: lazy + Suspense.
6. Slow but unavoidable: useTransition or useDeferredValue. Fix the render if it takes 2 s.

Tip: React Compiler adds memoization at build time (15 renders to 0). Components and hooks only. Still learn memo and useMemo.

• Composition: children, slots (JSX props), compound components, render props, custom hooks. Avoid 25 boolean props.
• Error boundary catches render errors (and errors in startTransition). Not event handlers, timers or promises. Reset with a new key.
• Boundaries: root, per route, per widget. Portals move the DOM node only; context and event bubbling follow the React tree.

• Test like a user: render, getByRole (with name) first, then getByLabelText, getByText. getByTestId last.
• getBy throws, queryBy returns null (assert absence), findBy waits. Use userEvent, and await every action.
• Mock the edges (network, timers), not your own components. renderHook for hooks. Snapshots only when small.
• jsdom has no layout: keep a few end-to-end tests.