vercel-react-best-practices

Start independent promises immediately without awaiting them, then await together with Promise.all. For partial dependencies, use the better-all library so each task starts at the earliest possible moment, yielding 2-10x improvements.

Import directly from source files instead of barrel entry points, for example importing from lucide-react/dist/esm/icons/check rather than the package root. In Next.js 13.5+, configure experimental.optimizePackageImports to transform barrel imports automatically at build time.

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 drives layout decisions, when content is SEO-critical above the fold, when queries are small and fast, or when layout shift from loading to content would harm the user experience.

Common causes include subscribing to continuous values instead of derived booleans, using object dependencies in effects instead of primitives, and reading state in components that only need it inside callbacks. Narrow effect dependencies and defer state reads to the usage point.