---

The 16 things to be sure of

If you remember nothing else, remember these.

1	React is a library — UI only. Routing, state and HTTP are separate choices.
2	A re-render re-runs the function and diffs; only real differences reach the DOM.
3	Re-render causes: state · props · parent · context · key. The parent is the one people forget.
4	useEffect: [] = mount, [x] = when x changes, no array = every render. Return the cleanup.
5	useMemo caches a value, useCallback a function. Both are pointless without React.memo or a dep array.
6	Measure before optimising. Don't memoize by default — React 19's compiler does it anyway.
7	Keys need stable ids. Index keys move state to the wrong row when the list changes.
8	Update state immutably — React compares references with Object.is.
9	API logic lives in a service layer; the token is attached in one API client.
10	Client validation and protected routes are UX. The server is the security.
11	Render all four states: loading · error · empty · content.
12	Error boundaries catch render errors only — never API calls or event handlers.
13	queryKey = cache identity + dependency array. Everything the queryFn uses must be in it.
14	Write → useMutation → invalidateQueries. Optimistic = onMutate snapshot, onError rollback, onSettled invalidate.
15	App wiring: index.html (#root) → main.tsx (createRoot + providers) → App.tsx (routes) → layout → page → service → api client.
16	Auth Code + PKCE for SPAs — a browser app can't keep a secret, and the implicit flow is dead. Send the access token, not the ID token.

Words to use (they signal seniority)

reconciliation · referential equality · stale closure · race condition · server state vs client state · trust boundary · single source of truth · separation of concerns · measure first · trade-off · idempotent · virtualization