vercel-react-best-practices

Use Promise.all() for independent async operations so they run concurrently instead of sequentially. For partial dependencies, start promises early and await late, or use the better-all library to maximize parallelism automatically.

Avoid barrel file imports from libraries like lucide-react or @mui/material by using direct imports or Next.js optimizePackageImports. Use next/dynamic to lazy-load heavy components and defer non-critical third-party scripts until after hydration.

Calculate derived state during rendering instead of in effects, use functional setState updates, and extract expensive work into memoized components. Use useDeferredValue or startTransition for non-urgent updates to keep inputs responsive.

Yes, most rules apply to any React codebase, including re-render optimization, JavaScript performance, and client-side fetching patterns. Next.js-specific rules cover Server Actions, RSC serialization, and next/dynamic imports.

Avoid Suspense when data is critical for 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.

Server Actions are exposed as public endpoints and can be invoked directly, bypassing middleware or layout guards. Always verify authentication and authorization inside each action and validate inputs before performing mutations.