react-best-practices

React best practices (Vercel)

Performance guide for React and Next.js — ~70 rules across 8 categories, prioritized by impact.

Source: vercel-labs/agent-skills (react-best-practices). MIT.

When to apply

• New React components or Next.js pages
• Client or server data fetching
• Performance review / refactor
• Bundle size or load-time work

Rule categories by priority

Priority	Category	Impact	Prefix
1	Eliminating Waterfalls	CRITICAL	async-
2	Bundle Size Optimization	CRITICAL	bundle-
3	Server-Side Performance	HIGH	server-
4	Client-Side Data Fetching	MEDIUM-HIGH	client-
5	Re-render Optimization	MEDIUM	rerender-
6	Rendering Performance	MEDIUM	rendering-
7	JavaScript Performance	LOW-MEDIUM	js-
8	Advanced Patterns	LOW	advanced-

Quick reference

1. Eliminating waterfalls (CRITICAL)

• async-cheap-condition-before-await — cheap sync checks before await
• async-defer-await — await only in branches that need it
• async-parallel — Promise.all() for independent work
• async-dependencies — better-all for partial dependencies
• async-api-routes — start promises early, await late
• async-suspense-boundaries — Suspense to stream content

2. Bundle size (CRITICAL)

• bundle-barrel-imports — direct imports, avoid barrels
• bundle-analyzable-paths — static paths for smaller traces
• bundle-dynamic-imports — next/dynamic for heavy UI
• bundle-defer-third-party — analytics after hydration
• bundle-conditional — load only when feature is on
• bundle-preload — preload on hover/focus

3. Server-side (HIGH)

• server-auth-actions — auth server actions like API routes
• server-cache-react — React.cache() per-request dedupe
• server-cache-lru — LRU across requests
• server-dedup-props — avoid duplicate RSC serialization
• server-hoist-static-io — fonts/logos at module level
• server-no-shared-module-state — no mutable request state in RSC/SSR
• server-serialization — minimize client-bound data
• server-parallel-fetching — parallelize fetches in the tree
• server-parallel-nested-fetching — nested fetches in Promise.all
• server-after-nonblocking — after() for non-blocking work