vercel-react-best-practices

Reduce React component re-renders by tuning state management to preserve state where possible and keeping effects, event handlers, and storage reads efficient. This approach minimizes unnecessary render cycles and keeps the application responsive.

Optimize React bundle size by preferring direct imports, utilizing dynamic loading for heavy modules, and implementing intent-based preloading. This ensures only necessary code is shipped to the client, reducing initial load times.

Fix Next.js hydration and serialization issues by establishing serialization-aware prop boundaries between server and client components. This ensures data passed across the network boundary remains compatible and prevents hydration mismatches.

Yes, this approach works for both client data fetching and server actions by applying techniques like React.cache, LRU caching, and parallel awaits across component refactors, route handlers, and server actions to optimize overall performance.

Use dynamic imports instead of static imports for React components when dealing with heavy modules to reduce initial bundle size. Intent-based preloading ensures these modules are fetched only when needed without blocking initial page rendering.