vercel-react-best-practices

Start independent async operations immediately and await them together with Promise.all(), or use better-all for partial dependency chains. In Server Components, restructure with component composition so sibling components fetch in parallel instead of sequentially.

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

Use Suspense when non-critical data fetching blocks your layout from rendering. Wrap the data-dependent component in Suspense so the surrounding UI paints immediately. Avoid it for SEO-critical content or when layout shift would harm UX.

Yes, Server Actions are public endpoints and must verify authentication and authorization inside each action. Do not rely on middleware or layout guards alone, since actions can be invoked directly by any client.

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 rerender-prefixed rules cover functional setState, useDeferredValue, and transitions for these cases.