vercel-react-best-practices

Start independent async operations immediately and await them together with Promise.all(), or use better-all for partial dependency chains. In components, restructure with composition so sibling components fetch in parallel instead of sequentially.

Import directly from source files instead of barrel files like lucide-react or @mui/material entry points, or enable optimizePackageImports in next.config.js. Use next/dynamic to lazy-load heavy components not needed on initial render.

React.cache() deduplicates calls within a single request, ideal for authentication and database queries in one render pass. Use an LRU cache like lru-cache for data shared across sequential requests, such as repeated user lookups.

Yes, several rules specifically address RSC concerns, including minimizing serialization at server-client boundaries, avoiding duplicate serialization in props, and parallel data fetching through component composition in the App Router.

Common causes include subscribing to state only used in callbacks, missing memoization of expensive work, and broad effect dependencies. The re-render rules recommend deriving state during render, using functional setState, and extracting memoized components.

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.