vercel-react-best-practices

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

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

No, React.cache() only deduplicates within a single request. For cross-request caching, use an LRU cache like the lru-cache package, which is especially effective with Vercel Fluid Compute where function instances are shared.

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

Server Actions are exposed as public endpoints just like API routes and can be invoked directly. Middleware or layout guards are insufficient, so always verify authentication and authorization inside each Server Action.

Do not wrap simple expressions with primitive result types in useMemo, as the memoization overhead exceeds the benefit. Reserve useMemo for expensive computations, and prefer deriving state during rendering instead of using effects.