vercel-react-best-practices

Start independent operations immediately without awaiting them, then await the promises later. Use Promise.all() for independent fetches and better-all for operations with partial dependencies, which can yield 2-10x improvement.

Avoid importing from barrel files like lucide-react or @mui/material entry points, which can load thousands of modules. In Next.js 13.5+, use optimizePackageImports in next.config.js, or import directly from subpaths in other projects.

Yes, it includes server-side rules such as authenticating Server Actions, using React.cache() for per-request deduplication, minimizing RSC prop serialization, and avoiding shared module state for request data.

Avoid Suspense when data is critical for layout decisions, needed for SEO above the fold, or when queries are small and fast. The trade-off is faster initial paint versus potential layout shift.

Both create stable callback references that always call the latest handler without re-subscribing effects. useEffectEvent is the modern React API providing a cleaner syntax, while the ref pattern works on older React versions.