react-best-practices

Execute independent async operations concurrently with Promise.all() instead of sequential awaits, and start promises early in API routes before awaiting them. For partial dependencies, use the better-all library to maximize parallelism automatically.

Import directly from source files instead of barrel files like 'lucide-react' or '@mui/material', which can load thousands of unused modules. Use next/dynamic for heavy components and defer non-critical third-party libraries until after hydration.

React.cache() deduplicates requests within a single server request only, while an LRU cache persists data across sequential requests. Use React.cache() for per-request deduplication and lru-cache for cross-request caching in serverless environments.

Yes, but some manual optimizations become unnecessary. With React Compiler enabled, manual memoization with memo() and useMemo(), plus static JSX hoisting, are handled automatically by the compiler.

Avoid Suspense when data is critical for layout decisions, needed for SEO content above the fold, or when queries are small and fast. Also skip it when you want to prevent layout shift from loading-to-content jumps.

Common causes include subscribing to continuous values instead of derived booleans, using object dependencies in useEffect 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.