vercel-react-best-practices

Start independent async operations immediately and await them together with Promise.all instead of awaiting sequentially. For partial dependencies, use the better-all library or chain promises so each task starts at the earliest possible moment.

Avoid barrel file imports from libraries like lucide-react or @mui/material, which can load thousands of unused modules. In Next.js 13.5+, enable optimizePackageImports in next.config.js, or import directly from subpaths in other projects.

Yes, the server-auth-actions rule requires authenticating and authorizing inside every Server Action, treating them like public API endpoints. It also recommends validating input with schemas like zod before performing mutations.

Use React.cache() for per-request deduplication so the same fetch runs once per render pass. Use a cross-request LRU cache for data shared across requests, since React.cache is cleared between requests.

Common causes include defining components inside components, missing memoization of expensive work, and broad effect dependencies. The re-render rules recommend extracting memoized components, using functional setState, and narrowing effect dependencies to primitives.

Avoid Suspense when data drives layout decisions, when content is SEO-critical above the fold, or when queries are small and fast. The trade-off is faster initial paint versus potential layout shift when content loads.