vercel-react-best-practices

Start independent async operations immediately and await them together with Promise.all() instead of awaiting sequentially. For partial dependencies, use better-all or chain promises so dependent fetches start as early as possible, yielding 2-10x improvements.

Import directly from source files instead of barrel entry points, or use Next.js optimizePackageImports to transform imports automatically. Barrel files in libraries like lucide-react or MUI can load thousands of unused modules, costing 200-800ms per cold start.

Use Suspense when only part of a page needs async data, so the wrapper layout renders immediately while data streams in. Avoid it for SEO-critical above-the-fold content or when layout shift from loading states would hurt the user experience.

Yes, several advanced rules cover useEffectEvent for stable callback refs and explain not to include Effect Events in dependency arrays. Fallback patterns using refs are also provided for older React versions.

Server Actions are exposed as public endpoints and can be invoked directly, bypassing middleware or layout guards. Always verify authentication and authorization inside each action, and validate inputs with a schema like Zod before performing mutations.

Some rules involve trade-offs, such as Suspense boundaries causing layout shift or memoization adding overhead for cheap computations. Each rule documents when not to apply it, so judgment is still required for context-specific decisions.