vercel-react-best-practices

Start independent async operations immediately and await them together with Promise.all() instead of awaiting sequentially. For partial dependencies, start promises early and chain dependent fetches, or use the better-all library to maximize parallelism automatically.

Avoid barrel file imports from libraries like lucide-react or @mui/material, use next/dynamic for heavy components, and defer non-critical third-party scripts until after hydration. Next.js 13.5+ can optimize package imports automatically via optimizePackageImports.

Yes, it includes server-side rules specific to RSC and Next.js, such as minimizing serialization at RSC boundaries, per-request deduplication with React.cache(), authenticating Server Actions like API routes, and avoiding shared module state for request data.

Use Suspense when only part of a page needs async data, so the surrounding layout renders immediately while data streams in. Avoid it for SEO-critical above-the-fold content, layout-determining data, or very fast queries where the overhead is not worthwhile.

Common causes include defining components inside components, missing memoization for expensive work, broad effect dependencies, and subscribing to raw state instead of derived values. The re-render optimization rules cover functional setState, useDeferredValue, transitions, and lazy state initialization.