React Best Practices

Comprehensive performance optimization guide for React and Next.js applications, tuned by gracefullight (forked from Vercel Engineering). Contains 42 rules across 8 categories (some rules are enforced by Biome linter), prioritized by impact to guide automated refactoring and code generation.

Project-Specific Notes

This project uses Orval + React Query (@tanstack/react-query) for API layer:

• Orval generates type-safe React Query hooks from OpenAPI specs
• Always use Orval-generated hooks in Client Components instead of RSC data fetching
• React Query handles caching, deduplication, and devtools
• RSC Components should handle layout, SEO metadata, and pass static props only

React Compiler is enabled (reactCompiler: true in next.config.ts):

• React Compiler automatically handles memoization (useMemo, useCallback, React.memo)
• Only use manual memoization when profiling a bottleneck or for genuinely expensive computations

When to Apply

Reference these guidelines when: