vercel-react-best-practices

Execute independent async operations concurrently with Promise.all() instead of sequential awaits, and start promises early in API routes before awaiting them. For partial dependencies, use better-all or chain promises so each task starts at the earliest possible moment.

Avoid importing from barrel files like 'lucide-react' or '@mui/material' entry points, which can load thousands of modules and cost 200-800ms per cold start. In Next.js 13.5+, use optimizePackageImports; otherwise import directly from source paths like '@mui/material/Button'.

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

Use Suspense boundaries to render wrapper UI immediately while data streams in, rather than awaiting data in async components before returning JSX. Avoid it for SEO-critical above-the-fold content, layout-determining data, or when layout shift is unacceptable.

Common causes include defining components inside components, subscribing to raw state instead of derived booleans, and putting interaction logic in effects instead of event handlers. The rules recommend functional setState, lazy state initialization, useDeferredValue, and extracting memoized components.

Rules are prioritized by impact, and low-impact micro-optimizations like caching property access only matter in hot paths. Some patterns have explicit exceptions, such as skipping cheap-condition-first ordering when the condition is expensive or side effects require fixed order.