Agent skill
React Hooks
Best practices for React Hooks usage and custom hook creation.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/hooks-fierzone-agent-skills-standar
Metadata
Additional technical details for this skill
- labels
-
react hooks custom-hooks useeffect
- triggers
-
{ "files": [ "**/*.tsx", "**/*.jsx" ], "keywords": [ "useEffect", "useCallback", "useMemo", "useRef", "custom hook" ] }
SKILL.md
React Hooks
Priority: P1 (OPERATIONAL)
Effective usage of React Hooks.
Implementation Guidelines
- Rules: Top-level only. Only in React functions.
useEffect: Sync with external systems ONLY. Cleanup required.useRef: Mutable state without re-renders (DOM, timers, tracking).useMemo/Callback: Measure first. Use for stable refs or heavy computation.- Dependencies: Exhaustive deps always. Fix logic, don't disable linter.
- Custom Hooks: Extract shared logic. Prefix
use*. - Refs as Escape Hatch: Access imperative APIs (focus, scroll).
- Stability: Use
useLatestpattern (ref) for event handlers to avoid dependency changes. - Concurrency:
useTransition/useDeferredValuefor non-blocking UI updates. - Initialization: Lazy state
useState(() => expensive()).
Anti-Patterns
- No Effects for Data Flow: Derive state in render.
- No Missing Deps: Causes stale closures.
- No Complex Effects: Split into multiple simple effects.
- No Oversubscription: Check
why-did-you-render.
Code
// Custom Hook
function useWindowSize() {
const [size, setSize] = useState({ w: 0, h: 0 });
useEffect(() => {
function handleResize() {
setSize({ w: window.innerWidth, h: window.innerHeight });
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []); // Empty = mount only
return size;
}
// Lazy Init
const [state, setState] = useState(() => computeExpensiveValue());
Reference & Examples
See references/REFERENCE.md.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?