react-best-practices

Start independent promises immediately without awaiting them, then await Promise.all() at the point of use. For partial dependency chains, use the better-all library to automatically maximize parallelism, yielding 2-10x improvements.

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

React.cache() deduplicates requests only within a single server request, ideal for authentication and database queries. LRU caching persists data across sequential requests, useful when multiple user actions hit endpoints needing the same data.

Yes, though some manual optimizations become unnecessary. The React Compiler automatically handles memoization and static JSX hoisting, but rules on waterfalls, bundle size, and functional setState updates remain recommended for correctness.

Avoid Suspense when data drives 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 during streaming.

Common causes include subscribing to continuous values instead of derived booleans, wide effect dependencies on objects rather than primitives, and reading state in subscriptions only used inside callbacks. Narrow dependencies and use media query hooks for derived state.