vercel-react-best-practices

Optimize React and Next.js performance by applying 57 rules across 8 categories, focusing on eliminating data fetching waterfalls, reducing bundle size, and improving server-side rendering efficiency. These guidelines help maintain and refactor codebases for optimal load times.

The best way to reduce bundle size in a Next.js application is to follow specific optimization guidelines that minimize unnecessary imports and prioritize critical code, directly enhancing user experience and load times.

Eliminate data fetching waterfalls in Next.js by parallelizing fetch requests according to established performance patterns. Correct implementation ensures data loads concurrently rather than sequentially, preventing render blocking.

Yes, you can use these React optimization rules to refactor existing components. The guidelines provide examples of incorrect versus correct implementations for various performance patterns, assisting AI agents in maintaining and refactoring codebases.

You need to memoize components in React when optimizing re-render efficiency. Following established performance rules ensures components are memoized correctly, preventing unnecessary re-renders and improving overall application responsiveness.

Your React component re-renders inefficiently due to unoptimized state management and prop passing. Applying Vercel Engineering guidelines for re-render efficiency and correct memoization patterns resolves these performance bottlenecks.