react-best-practices

Start independent async operations immediately and await them together with Promise.all instead of sequential awaits. For partial dependencies, use better-all or chain promises so dependent fetches start as early as possible.

Import directly from source files like 'lucide-react/dist/esm/icons/check' instead of the package entry point, which can load thousands of unused modules. In Next.js 13.5+, use the optimizePackageImports config option to transform barrel imports automatically.

Yes, Server Actions are exposed as public endpoints just like API routes. Always verify authentication and authorization inside each action rather than relying on middleware or layout guards, and validate inputs with a schema like zod.

React.cache deduplicates calls within a single request only, ideal for auth checks and database queries in one render pass. Use an LRU cache like lru-cache when data must persist across sequential requests, such as repeated user lookups.

Common causes include subscribing to continuous values instead of derived booleans, missing functional setState updates causing stale closures, and unstable default props breaking memoization. Use useMemo for expensive computations and extract work into memoized child components.

Avoid Suspense when the 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 when content loads.