---

name: react-best-practices description: Guide React development with best practices from react.dev and Vercel Engineering. Use when reviewing code, debugging performance, or making architectural decisions. allowed-tools:

• Read
• Grep
• mcp__context7__resolve-library-id
• mcp__context7__query-docs

---

React Best Practices

Performance patterns and guidelines from react.dev and Vercel Engineering.

Quick Reference (Priority Order)

CRITICAL - Must Follow

HIGH - Strongly Recommended

MEDIUM - Recommended

LOW - Nice to Have

---

Quick Decision Tree

CopyPerformance Issue?
├── Slow initial load?
│   ├── Check for waterfalls → async-waterfall-elimination.md
│   ├── Check bundle size → bundle-barrel-imports.md
│   └── Preload on intent → bundle-preload.md
├── Slow interactions?
│   ├── Check re-renders → rerender-memo-strategy.md
│   ├── Check Context usage → rerender-context-splitting.md
│   └── Use transitions → rerender-transitions.md
├── Long list jank?
│   └── Use content-visibility → rendering-content-visibility.md
├── SSR flicker?
│   └── Inline script pattern → rendering-hydration-flicker.md
└── Slow server?
    └── Check caching → server-cache-patterns.md

---

Reference Files

Search rules: grep -l "keyword" references/rules/