陌讯skills聚合平台

react-best-practices

📁 ahonn/dotfiles 📅 11 days ago
1
总安装量
1
周安装量
#47560
全站排名
安装命令
npx skills add https://github.com/ahonn/dotfiles --skill react-best-practices

Agent 安装分布

antigravity 1

Skill 文档

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/

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台
本页面由 陌讯 Skills 聚合平台 收录整理，数据定期更新。