vercel-react-best-practices

Start independent promises immediately and await them later, or use Promise.all() for operations with no interdependencies. For partial dependency chains, the better-all library starts each task 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+, the optimizePackageImports config option transforms barrel imports automatically at build time.

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

Use Suspense when non-critical data would otherwise block the entire layout from rendering, letting the wrapper UI paint immediately while data streams in. Avoid it for SEO-critical above-the-fold content or when layout shift would harm the user experience.

Common causes include defining components inside components, inline object dependencies in effects, and subscribing to state only used in callbacks. The rules recommend functional setState updates, narrow effect dependencies, derived state during render, and useRef for transient values.

Some rules involve trade-offs, such as Suspense boundaries causing layout shift, or module-level caching consuming memory for large assets. Rules are prioritized by impact, so low-impact JavaScript micro-optimizations should only be applied in hot paths after critical issues are fixed.