vercel-react-best-practices

First profile with React DevTools or Chrome DevTools to identify the bottleneck. For slow first paint, check for large bundles (barrel file imports) or sequential server fetches, then apply direct imports, dynamic imports, Promise.all parallelization, or Suspense boundaries.

Start independent operations immediately without awaiting, then combine with Promise.all, or restructure components so sibling Server Components fetch in parallel. For partial dependencies, use the better-all library or chain promises before awaiting.

Only memo components that receive complex object props, re-render frequently from parent state, and cost over 5ms in the profiler. Avoid useMemo for simple primitive expressions, since memoization itself adds comparison and memory overhead.

Barrel files re-export thousands of modules, forcing the bundler to load the entire module graph even when you import one item. Libraries like lucide-react or @mui/material can add 200-800ms per cold start; import directly from source files or use optimizePackageImports.

No. Next.js automatically deduplicates fetch calls within a request, but React.cache() is still needed for database queries, authentication checks, heavy computations, and file system operations that run multiple times in one render tree.

Avoid Suspense for critical data needed for layout decisions, SEO-critical above-the-fold content, and small fast queries where the overhead is not worth it. The trade-off is faster initial paint versus potential layout shift.