vercel-react-best-practices

Start independent operations immediately without awaiting them, then await the promises later. Use Promise.all() for fully independent calls, or the better-all library for operations with partial dependencies, achieving 2-10x improvements.

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; otherwise import directly from subpaths like @mui/material/Button.

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 overhead is not worth it.

Yes, it requires authenticating Server Actions like public API routes. Always verify session and authorization inside each action rather than relying on middleware or layout guards, and validate inputs with schemas like zod before mutations.

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 optimization rules cover useMemo, useTransition, useDeferredValue, and functional setState fixes.

Rules are prioritized by impact, so LOW-level JavaScript micro-optimizations only matter in hot paths. Some patterns involve trade-offs, such as Suspense causing layout shift, and localStorage caching requiring invalidation when storage changes externally.