Vercel Launches React Best Practices Repo

Vercel has launched 'react-best-practices,' an open-source repository containing over 40 performance and correctness rules for React and Next.js. The rules are designed to be consumed by both human developers and AI agents, providing a structured way to optimize applications.

This new Vercel repository codifies over a decade of performance engineering knowledge from real-world Next.js and React applications. The rules are intentionally ordered by impact, prioritizing the elimination of asynchronous request waterfalls and the reduction of bundle sizes over micro-optimizations. This structure addresses the most common and significant performance bottlenecks first. The 'react-best-practices' are packaged as "Agent Skills" and can be installed into various AI coding assistants like Claude Code and Cursor. This allows AI agents to reference these patterns to suggest fixes for issues like cascading `useEffect` calls or heavy client-side imports during code review and refactoring. The rules are compiled into a single `AGENTS.md` file to be easily queried by these automated tools. This move aligns with the broader industry trend of compiler-driven optimization in the React ecosystem. The React Compiler, which reached stable status in late 2025, automatically adds memoization at build time to prevent unnecessary re-renders without manual intervention from developers. It analyzes component code to understand data flow and inserts optimizations, shifting the responsibility of performance from the developer to the toolchain. The focus on performance also highlights the growing influence of signals-based reactivity, a pattern popularized by frameworks like SolidJS and now adopted by Angular and Preact. Signals offer a fine-grained approach to state management that avoids re-rendering entire component trees, instead updating only the specific DOM elements affected by a state change. This contrasts with React's traditional model and the problem the new React Compiler aims to solve automatically. For computationally intensive tasks, the frontend community is increasingly turning to WebAssembly (Wasm). Wasm allows developers to run code written in languages like Rust and C++ at near-native speeds in the browser, offloading heavy computations that would otherwise block the main thread. This is particularly useful for applications involving 3D rendering, video editing, and complex data visualizations. The emphasis on structured, machine-readable rules for AI agents reflects a growing need for well-designed APIs in all aspects of development, including internal libraries. Effective API design prioritizes clarity, consistency, and a positive developer experience, ensuring that tools are easy to adopt and hard to misuse. Principles like using nouns for resource names, providing clear error codes, and supporting pagination are crucial for creating scalable and maintainable systems.

Get your own daily briefing

Scout delivers personalized news, insights, and conversations tailored to your role and industry.

Download on the App Store

Shared from Scout - Be the smartest in the room.