vercel-react-best-practices

Start independent promises immediately and await them later, or use Promise.all() for operations with no interdependencies. For partial dependency chains, the better-all library starts each task at the earliest possible moment, yielding 2-10x improvements.

Avoid barrel file imports that load thousands of unused modules. In Next.js 13.5+, use the optimizePackageImports config option to automatically transform imports; otherwise import directly from subpaths like @mui/material/Button.

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

Avoid Suspense when data is critical for layout decisions, when content is SEO-critical above the fold, when queries are small and fast, or when you want to prevent layout shift between loading and loaded states.

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 fixes.