vercel-react-best-practices

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

Import directly from source files instead of barrel files, such as importing from lucide-react/dist/esm/icons/check rather than the package root. On Next.js 13.5+, enable optimizePackageImports in next.config.js to transform barrel imports automatically.

Yes, Server Actions are publicly exposed endpoints and must verify authentication and authorization inside each action. Do not rely on middleware or layout guards alone, since actions can be invoked directly like API routes.

React.cache() deduplicates calls within a single request, ideal for auth and database queries during one render. Use an LRU cache like lru-cache when data must persist across sequential requests, such as repeated user actions hitting multiple endpoints.

Common causes include defining components inside components, missing memoization of expensive work, broad effect dependencies, and subscribing to raw state instead of derived values. The re-render rules cover functional setState, lazy initialization, transitions, and extracting memoized components.

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