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.mdReference 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/