AgentSkillsCN

react-best-practices

来自 react.dev 和 Vercel 的 React 最佳实践。适用场景：(1) 审查 React 代码；(2) 调试性能问题；(3) 优化 Bundle 大小；(4) 编写 Effect 或状态逻辑。触发条件：React 性能、重新渲染、Bundle 大小、瀑布图、代码分割、Memo、useCallback、useMemo、useEffect、SSR 闪烁、首次加载缓慢、React Compiler、状态结构、不可变更新、setState 数组对象。

SKILL.md
--- frontmatter
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

RuleImpactReference
Avoid unnecessary effectsRender cycles, bugseffect-pitfalls.md
Eliminate waterfallsFirst paint, TTIasync-waterfall-elimination.md
Parallel data fetchingLoad timeasync-parallel-requests.md
Avoid barrel importsBundle sizebundle-barrel-imports.md

HIGH - Strongly Recommended

RuleImpactReference
React Compiler (19+)Auto memoizationreact-compiler.md
Dynamic importsCode splittingbundle-dynamic-import.md
Preload on user intentPerceived latencybundle-preload.md
Strategic memo()Render perfrerender-memo-strategy.md
Server cachingServer responseserver-cache-patterns.md

MEDIUM - Recommended

RuleImpactReference
State structureMaintainabilitystate-structure.md
Immutable updatesAvoid mutation bugsimmutable-updates.md
Context splittingAvoid rerendersrerender-context-splitting.md
startTransitionUI responsivenessrerender-transitions.md
Set/Map lookupsO(1) vs O(n)js-set-map-lookups.md
Key patternsList renderingrendering-key-patterns.md

LOW - Nice to Have

RuleImpactReference
content-visibilityLong list renderrendering-content-visibility.md
Hydration flickerSSR stabilityrendering-hydration-flicker.md
Hoist static JSXAvoid re-creationrendering-hoist-static-jsx.md

Quick Decision Tree

code
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

FileContent
hooks-guide.mdHook patterns, decision guides, pitfalls
effect-pitfalls.mdWhen NOT to use useEffect
react-compiler.mdReact 19+ auto memoization
state-structure.md5 principles for state design
immutable-updates.mdArray/object update patterns
references/All reference files (19 total)

Search rules: grep -l "keyword" references/