react-best-practices

name	react-best-practices
description	React best practices from react.dev and Vercel. Use when: (1) Reviewing React code, (2) Debugging performance issues, (3) Optimizing bundle size, (4) Writing effects or state logic. Triggers on: React performance, re-render, bundle size, waterfalls, code splitting, memo, useCallback, useMemo, useEffect, SSR flicker, initial load slow, React Compiler, state structure, immutable update, setState array object.
user-invocable	false

React Best Practices

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

Quick Reference (Priority Order)

CRITICAL - Must Follow

Rule	Impact	Reference
Avoid unnecessary effects	Render cycles, bugs	effect-pitfalls.md
Eliminate waterfalls	First paint, TTI	async-waterfall-elimination.md
Parallel data fetching	Load time	async-parallel-requests.md
Avoid barrel imports	Bundle size	bundle-barrel-imports.md

HIGH - Strongly Recommended

Rule	Impact	Reference
React Compiler (19+)	Auto memoization	react-compiler.md
Dynamic imports	Code splitting	bundle-dynamic-import.md
Preload on user intent	Perceived latency	bundle-preload.md
Strategic memo()	Render perf	rerender-memo-strategy.md
Server caching	Server response	server-cache-patterns.md

MEDIUM - Recommended

Rule	Impact	Reference
State structure	Maintainability	state-structure.md
Immutable updates	Avoid mutation bugs	immutable-updates.md
Context splitting	Avoid rerenders	rerender-context-splitting.md
startTransition	UI responsiveness	rerender-transitions.md
Set/Map lookups	O(1) vs O(n)	js-set-map-lookups.md
Key patterns	List rendering	rendering-key-patterns.md

LOW - Nice to Have

Rule	Impact	Reference
content-visibility	Long list render	rendering-content-visibility.md
Hydration flicker	SSR stability	rendering-hydration-flicker.md
Hoist static JSX	Avoid re-creation	rendering-hoist-static-jsx.md

---

Quick Decision Tree

React Issue?
├── Writing useEffect?
│   └── Check if needed → effect-pitfalls.md (CRITICAL)
├── Designing state?
│   └── Follow 5 principles → state-structure.md
├── Updating state?
│   └── Use immutable patterns → immutable-updates.md
├── Using React 19+?
│   └── Enable React Compiler → react-compiler.md
├── 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

File	Content
hooks-guide.md	Hook patterns, decision guides, pitfalls
effect-pitfalls.md	When NOT to use useEffect
react-compiler.md	React 19+ auto memoization
state-structure.md	5 principles for state design
immutable-updates.md	Array/object update patterns
references/	All reference files (19 total)

Search rules: grep -l "keyword" references/