vercel-react-best-practices

Start independent operations immediately by creating promises before awaiting them, then use Promise.all to await them together. For partial dependencies, chain promises or use the better-all library so each task starts at the earliest possible moment.

Import directly from source files instead of barrel entry points, or use Next.js 13.5+ optimizePackageImports config which transforms imports automatically. Barrel files in libraries like lucide-react or MUI can load thousands of unused modules, adding 200-800ms to cold starts.

Yes, it includes server-side rules for RSC serialization minimization, per-request deduplication with React.cache, avoiding shared module state, and parallel data fetching with component composition. It also covers authenticating Server Actions like public API routes.

Use Suspense when only part of the page needs async data, so the 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 of expensive work, broad effect dependencies, and subscribing to raw state instead of derived values. The re-render rules cover useMemo, useTransition, useDeferredValue, and functional setState patterns.