Agent Skills: React Best Practices

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/