vercel-react-best-practices

Use Promise.all() for independent async operations and start promises early in API routes before awaiting them. 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 files like lucide-react or @mui/material entry points, which can load thousands of unused modules. Use next/dynamic for heavy components and Next.js 13.5+ optimizePackageImports for automatic transformation.

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, 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 when content loads.

Common causes include subscribing to state only used in callbacks, missing memoization of expensive computations, and broad effect dependencies. Use functional setState updates, narrow effect dependencies to primitives, and extract expensive work into memoized components.

Inject a synchronous inline script via dangerouslySetInnerHTML that reads localStorage and updates the DOM before React hydrates. This avoids both SSR errors from undefined localStorage and the visible flicker caused by useEffect-based updates.