vercel-react-best-practices

Start independent operations immediately by creating promises before awaiting them, then use Promise.all() to await them together. For partial dependencies, use the better-all library or chain promises so each task starts at the earliest possible moment.

Import directly from source files instead of barrel entry points, such as importing from 'lucide-react/dist/esm/icons/check' rather than 'lucide-react'. In Next.js 13.5+, configure optimizePackageImports in next.config.js to transform barrel imports automatically at build time.

Use Suspense when only part of a page needs fetched data, so the surrounding layout renders immediately while data streams in. Avoid it for SEO-critical above-the-fold content, layout-determining data, or very fast queries where the overhead is not worthwhile.

No, React.cache() only deduplicates calls 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 concurrent requests share a function instance.

Common causes include defining components inside other components, missing memoization of expensive computations, broad effect dependencies, and subscribing to raw state instead of derived values. The re-render rules cover functional setState, lazy initialization, useDeferredValue, and splitting combined hooks.

The rules target React and Next.js specifically and assume modern browser features like toSorted() and the Activity component. Some patterns involve trade-offs, such as Suspense causing layout shift, and micro-optimizations only matter in genuinely hot code paths.