react-best-practices

Use Promise.all() for independent async operations, start promises early in API routes before awaiting them, and use better-all for operations with partial dependencies. These patterns convert sequential round trips into parallel execution for 2-10x improvement.

Import directly from source files instead of barrel files like lucide-react or @mui/material entry points, use next/dynamic for heavy components, and defer analytics libraries until after hydration. Next.js 13.5+ also offers optimizePackageImports for automatic transformation.

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 function instances persist.

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

Common causes include subscribing to continuous values instead of derived booleans, using object dependencies in effects instead of primitives, and reading state at the top level when it is only used in callbacks. Narrow effect dependencies and subscribe to derived state to reduce re-renders.

The rules target React and Next.js specifically and may not apply to other frameworks. If React Compiler is enabled, manual memoization with memo() and useMemo() is unnecessary since the compiler handles re-render optimization automatically.