react-best-practices

Apply fixes in impact order — don't spend the budget on MEDIUM re-render tweaks while a CRITICAL data waterfall or barrel import is unfixed. (Distilled in our own way from Vercel Labs' react-best-practices + composition-patterns, MIT. If React Compiler is on, skip the Tier-3 memoization rules — it handles them.)

Tier 1 — CRITICAL (2–10× wins)

Parallelize independent awaits. Don't await a() then await b() — start both, then await (Promise.all, or kick off promises before awaiting). Defer an await into the branch that needs it, after cheap synchronous guards / early returns.
Chain per-item nested fetches so one slow item doesn't block the rest: ids.map(id => getChat(id).then(c => getUser(c.author))).
RSC parallelism. Sibling awaits in one Server Component run sequentially — split them into separate async child components (or pass a shared promise + use()). Wrap only the data-dependent subtree in <Suspense> so the shell paints immediately.
Kill barrel imports. A single import { X } from 'lucide-react' | '@mui/*' | 'lodash' | 'date-fns' | '@radix-ui/*' can pull 1500–2000 modules (200–800ms cold start). Use Next's optimizePackageImports, or import the exact subpath.
next/dynamic (with ssr:false) for heavy client-only components (editors, charts) and non-critical third-party (analytics). Keep import paths statically analyzable.

Tier 2 — HIGH

Server Actions are public endpoints — authenticate, authorize, and validate (zod) inside every action. Never rely on middleware/layout guards.
No request/user data in module-level mutable variables — concurrent renders leak across requests.
Hoist static I/O (fonts, config, templates) to module scope so it runs once, not per request.
React.cache() to dedupe within a request (pass stable refs); LRU/Redis across requests.
Serialize only the RSC→client props the client uses. Don't pass both an array and its .toSorted() — transform on the client.
Long lists: content-visibility:auto + contain-intrinsic-size (~10× initial render). Script defer/async; resource hints (preconnect/preload).