File contents 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/
Source: ahonn/dotfiles — distributed by TomeVault .
1 --- 2 name: ahonn-dotfiles-dotfiles 3 description: React Best Practices 4 --- 5 6 # React Best Practices 7 8 Performance patterns and guidelines from react.dev and Vercel Engineering. 9 10 ## Quick Reference (Priority Order) 11 12 ### CRITICAL - Must Follow 13 14 | Rule | Impact | Reference | 15 |------|--------|-----------| 16 | Avoid unnecessary effects | Render cycles, bugs | [effect-pitfalls.md](references/effect-pitfalls.md) | 17 | Eliminate waterfalls | First paint, TTI | [async-waterfall-elimination.md](references/async-waterfall-elimination.md) | 18 | Parallel data fetching | Load time | [async-parallel-requests.md](references/async-parallel-requests.md) | 19 | Avoid barrel imports | Bundle size | [bundle-barrel-imports.md](references/bundle-barrel-imports.md) | 20 21 ### HIGH - Strongly Recommended 22 23 | Rule | Impact | Reference | 24 |------|--------|-----------| 25 | React Compiler (19+) | Auto memoization | [react-compiler.md](references/react-compiler.md) | 26 | Dynamic imports | Code splitting | [bundle-dynamic-import.md](references/bundle-dynamic-import.md) | 27 | Preload on user intent | Perceived latency | [bundle-preload.md](references/bundle-preload.md) | 28 | Strategic memo() | Render perf | [rerender-memo-strategy.md](references/rerender-memo-strategy.md) | 29 | Server caching | Server response | [server-cache-patterns.md](references/server-cache-patterns.md) | 30 31 ### MEDIUM - Recommended 32 33 | Rule | Impact | Reference | 34 |------|--------|-----------| 35 | State structure | Maintainability | [state-structure.md](references/state-structure.md) | 36 | Immutable updates | Avoid mutation bugs | [immutable-updates.md](references/immutable-updates.md) | 37 | Context splitting | Avoid rerenders | [rerender-context-splitting.md](references/rerender-context-splitting.md) | 38 | startTransition | UI responsiveness | [rerender-transitions.md](references/rerender-transitions.md) | 39 | Set/Map lookups | O(1) vs O(n) | [js-set-map-lookups.md](references/js-set-map-lookups.md) | 40 | Key patterns | List rendering | [rendering-key-patterns.md](references/rendering-key-patterns.md) | 41 42 ### LOW - Nice to Have 43 44 | Rule | Impact | Reference | 45 |------|--------|-----------| 46 | content-visibility | Long list render | [rendering-content-visibility.md](references/rendering-content-visibility.md) | 47 | Hydration flicker | SSR stability | [rendering-hydration-flicker.md](references/rendering-hydration-flicker.md) | 48 | Hoist static JSX | Avoid re-creation | [rendering-hoist-static-jsx.md](references/rendering-hoist-static-jsx.md) | 49 50 --- 51 52 ## Quick Decision Tree 53 54 ``` 55 React Issue? 56 ├── Writing useEffect? 57 │ └── Check if needed → effect-pitfalls.md (CRITICAL) 58 ├── Designing state? 59 │ └── Follow 5 principles → state-structure.md 60 ├── Updating state? 61 │ └── Use immutable patterns → immutable-updates.md 62 ├── Using React 19+? 63 │ └── Enable React Compiler → react-compiler.md 64 ├── Slow initial load? 65 │ ├── Check for waterfalls → async-waterfall-elimination.md 66 │ ├── Check bundle size → bundle-barrel-imports.md 67 │ └── Preload on intent → bundle-preload.md 68 ├── Slow interactions? 69 │ ├── Check re-renders → rerender-memo-strategy.md 70 │ ├── Check Context usage → rerender-context-splitting.md 71 │ └── Use transitions → rerender-transitions.md 72 ├── Long list jank? 73 │ └── Use content-visibility → rendering-content-visibility.md 74 ├── SSR flicker? 75 │ └── Inline script pattern → rendering-hydration-flicker.md 76 └── Slow server? 77 └── Check caching → server-cache-patterns.md 78 ``` 79 80 --- 81 82 ## Reference Files 83 84 | File | Content | 85 |------|---------| 86 | [hooks-guide.md](references/hooks-guide.md) | Hook patterns, decision guides, pitfalls | 87 | [effect-pitfalls.md](references/effect-pitfalls.md) | When NOT to use useEffect | 88 | [react-compiler.md](references/react-compiler.md) | React 19+ auto memoization | 89 | [state-structure.md](references/state-structure.md) | 5 principles for state design | 90 | [immutable-updates.md](references/immutable-updates.md) | Array/object update patterns | 91 | [references/](references/) | All reference files (19 total) | 92 93 **Search rules**: `grep -l "keyword" references/` 94 95 --- 96 > Source: [ahonn/dotfiles](https://github.com/ahonn/dotfiles) — distributed by [TomeVault](https://tomevault.io). 97 <!-- tomevault:4.0:skill_md:2026-06-19 -->
tomevault-io/skills-registry/tree/main/ahonn--dotfiles--dotfiles commit d3d24c980b
Frequently asked questions How do I install the Ahonn Dotfiles Dotfiles skill? Run npx skillmds@latest add tomevault-io/ahonn-dotfiles-dotfiles in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
What does the Ahonn Dotfiles Dotfiles skill do? React Best Practices It is listed under Web & Frontend on SkillMD.
Is Ahonn Dotfiles Dotfiles safe to use? This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
Which AI agents work with Ahonn Dotfiles Dotfiles? This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Is Ahonn Dotfiles Dotfiles free to use? Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Who published Ahonn Dotfiles Dotfiles? tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.