react-best-practices

Fix slow initial page loads by identifying performance bottlenecks like large bundle sizes from barrel imports and inefficient data fetching waterfalls. Apply specific optimization rules to reduce bundle size and improve server-side rendering efficiency.

A data fetching waterfall occurs when sequential async requests block rendering, degrading React performance. Eliminate waterfalls by enforcing parallel data fetching patterns and optimizing server-side rendering to ensure faster load times.

Optimize bundle size by replacing barrel imports with direct module imports to prevent bundling unused code. This code optimization technique reduces the final JavaScript payload and improves client-side rendering efficiency.

Yes, this React optimization approach works for both server-side and client-side rendering. It provides actionable rules to improve rendering efficiency across both environments, ensuring smoother user experiences and faster load times.

The best way to audit React performance anti-patterns is to review the codebase against Vercel Engineering standards. This identifies critical issues like inefficient data fetching and large bundles, providing specific refactoring suggestions.

Refactor your web application for performance tuning when experiencing slow initial page loads or inefficient code execution. Targeting developers and AI agents, this process enforces best practices to resolve critical performance bottlenecks.