Introducing: React Best Practices
Blog post from Vercel
React-best-practices is a comprehensive repository that encapsulates over a decade of experience in optimizing React and Next.js applications, designed to assist AI agents and large language models. It addresses common performance issues such as async work becoming sequential, large client bundles, and unnecessary component re-renders, which can result in slower applications. The framework emphasizes starting with high-impact fixes like eliminating request waterfalls and reducing bundle size before moving to server-side and client-side optimizations. It features over 40 rules across eight categories, ranging from critical to incremental, with practical code examples to illustrate common pitfalls and solutions. These practices are derived from real-world production codebases, showcasing the benefits of combining loop iterations, parallelizing async operations, and lazy state initialization. The repository is also available as agent skills for coding tools, enabling automated suggestions for optimization.