Agent Skills
› AjayIrkal23/agentic-mercy-10x
› react-hooks-patterns
react-hooks-patterns
GitHub指导React组件中状态、副作用、引用及自定义Hook的选择与实现。涵盖useState/Reducer选型、派生状态处理、记忆化优化及代码提取，确保效果安全并避免陈旧闭包问题。
Trigger Scenarios
实现或审查React组件的本地状态管理
选择useState, useReducer, refs或自定义Hook
审查副作用安全性、陈旧闭包或派生状态
前端架构规划中涉及状态所有权或Hook提取
Install
npx skills add AjayIrkal23/agentic-mercy-10x --skill react-hooks-patterns -g -y
SKILL.md
Frontmatter
{
"name": "react-hooks-patterns",
"schema": 1,
"category": "frontend",
"surfaces": [
"frontend"
],
"triggers": {
"paths": [
".hook.",
".jsx",
".tsx",
"\/components\/",
"\/hooks\/use",
"\/pages\/",
"\/src\/hooks\/",
"\/store\/",
"\/views\/",
"reducer.",
"redux",
"selector.",
"slice.",
"use-",
"useHook"
],
"intents": [
"frontend"
],
"keywords": [
"component",
"custom",
"effects",
"extraction",
"hook",
"hooks",
"implementing",
"memoization",
"patterns",
"react",
"reducers",
"refs",
"reviewing",
"state"
]
},
"platforms": [
"linux",
"darwin",
"windows"
],
"token-cost": 460,
"description": "ALWAYS invoke when implementing or reviewing React component state, effects, refs, reducers, memoization, or custom hook extraction.",
"disable-model-invocation": false
}
React Hooks Patterns
Use When
- A React component needs local state or side effects.
- You are choosing between
useState,useReducer, refs, memoization, or a custom hook. - You are reviewing effect safety, stale closures, or derived state.
- A frontend architecture or planning task needs explicit decisions about state ownership, effect boundaries, or custom hook extraction.
Do Not Use
- Styling-only changes.
- General frontend architecture without hook complexity.
- Framework-managed server data that should live outside local effects.
Owns
- Safe hook selection and effect hygiene.
- Derived-state discipline and custom hook extraction.
- Memoization decisions that are justified by behavior, not habit.
Does Not Own
- Module boundaries and file layout.
- Backend or API contract design.
- Visual styling or Tailwind implementation details.
Combine With
architect-system-designwhen frontend planning must account for state ownership, effect boundaries, or custom hook extraction.frontend-standards-always-followfor the always-on frontend baseline.frontend-structure-standardsfor where logic belongs.frontend-server-data-patternswhen the component mirrors backend query state.debug-investigationfor stale closure or effect regressions.
Workflow
- Prefer the simplest state model that matches the behavior.
- Avoid effects when render or event logic is enough.
- Do not store derived state that can be computed from current inputs.
- Treat
useMemoanduseCallbackas conditional tools, not defaults. - Extract a custom hook when logic becomes reusable or hard to read inline.
Output Contract
- The chosen hook pattern and why it fits.
- Any effect dependencies, cleanup needs, or stale-closure risks.
- A recommendation for custom hook extraction when appropriate.
Version History
- 581d130 Current 2026-07-19 09:13
