react-best-practices

name	React Best Practices
description	REACT AND NEXT.JS performance optimization guidelines from Vercel Engineering. 70+ rules across 8 categories prioritized by impact. Enforce: no data waterfalls, no moment.js, no barrel imports, Server Components by default, TanStack Query for client fetching. Trigger: writing/reviewing/refactoring React or Next.js code, optimizing bundle size or load times.
license	MIT
metadata	{"author":"vercel","version":"2.0.0","last_updated":"2026-06-28T00:00:00.000Z"}
stacks	["React 19.2","Next.js 16","TanStack Query v5+","TypeScript 6.0"]
related_skills	["component-architecture-patterns","empty-loading-error-states","performance-budgets-and-cwv","saas-app-structure","full-stack-file-tree-architecture","react-composition","react-view-transitions"]
category	react
version	2.0.0

React Best Practices: Vercel Engineering

IDENTIFY: When to Activate

Activate when:

• Writing new React components or Next.js pages
• Implementing data fetching (client or server-side)
• Reviewing code for performance issues
• Refactoring existing React/Next.js code
• Optimizing bundle size or load times
• ANY code generation for React/Next.js projects

PRIORITY MAP: Rule Categories by Impact

Priority	Category	Impact	Prefix	Apply When
1	Eliminating Waterfalls	CRITICAL	async-	Data fetching
2	Bundle Size Optimization	CRITICAL	bundle-	Importing modules, adding libraries
3	Server-Side Performance	HIGH	server-	Server Components, API routes
4	Client-Side Data Fetching	MEDIUM-HIGH	client-	Client components fetching data
5	Re-render Optimization	MEDIUM	rerender-	State management, component updates
6	Rendering Performance	MEDIUM	rendering-	Layout, hydration, SVG
7	JavaScript Performance	LOW-MEDIUM	js-	Loops, lookups, DOM operations
8	Advanced Patterns	LOW	advanced-	Edge cases, refs, effects

EXECUTE: ALWAYS Apply Rules by Priority

Priority 1: Eliminating Waterfalls

// ✅ Parallel, independent fetches combined
const [user, posts] = await Promise.all([getUser(), getPosts()]);


 user =  ();
 posts =  ();