vercel-react-best-practices

Fix React and Next.js server/client waterfalls by parallelizing independent async work and deferring tasks until needed. This eliminates sequential data fetching bottlenecks in server components, API routes, and server actions.

Reduce React bundle size by avoiding barrel imports and using dynamic imports for heavy components. Deferring non-critical third-party code and preloading based on user intent further decreases load times.

Optimize React rendering by correcting inefficient effect dependencies and applying Suspense boundaries. Targeted patterns like passive listeners and transitions improve UI responsiveness and prevent unnecessary re-renders.

You can audit a React or Next.js change request to return a prioritized list of rule-based fixes. This provides before and after refactoring guidance for inefficient data fetching, rendering, and bundle composition patterns.

Unnecessary re-renders and serialization overhead occur due to inefficient data loading and component patterns. Correcting effect dependencies, optimizing client data loading, and applying Suspense boundaries resolve these performance pitfalls.