[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6GXG6EV2W3H2PNEAADENX8P":3,"skill-same:01M6GXG6EV2W3H2PNEAADENX8P":77},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":41,"linkOnly":42,"markdownContent":43,"markdownBody":44,"frontMatter":45,"refName":54,"commitSha":55,"skillDirectory":56,"forksCount":57,"repositoryHtmlUrl":58,"repositoryHomepageUrl":58,"ownerHtmlUrl":59,"ownerBlogUrl":60,"ownerDescription":61,"updatedAt":62,"install":63,"resources":76},"01M6GXG6EV2W3H2PNEAADENX8P","React Hooks Review",null,"Deep review of React hook usage — dependency arrays, custom hook patterns, stale closures, re-render traps, and rules of hooks violations.","malayvuong\u002Fagent-orchestra","malayvuong","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F13240975?v=4","01M6GXCDVPB2VPZMDZK1KF98M0","Nguyen Minh Vuong","01M6GXCE176VDX3XV4Z4KNR33J",1,"MIT","https:\u002F\u002Fgithub.com\u002Fmalayvuong\u002Fagent-orchestra\u002Fblob\u002Fmain\u002F.agent-orchestra\u002Fskills\u002Freact-hooks\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[5,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40],"react","hooks","react hooks","review","arrays","usage","re","hook","render","logic","deep","patterns","stale","dependency","Rules","deep review","performance","2026-11-10 10:12:30",false,"---\nname: React Hooks Review\ndescription: Deep review of React hook usage — dependency arrays, custom hook patterns, stale closures, re-render traps, and rules of hooks violations.\nversion: 2026.3.1\nlicense: MIT\ntriggers:\n  lenses:\n    - logic\n    - performance\n  keywords:\n    - react\n    - hooks\n    - useState\n    - useEffect\n    - useMemo\n    - useCallback\n---\n\nWhen reviewing React code, apply the following hook-specific checks systematically.\n\n## Rules of Hooks Violations\n\nVerify hooks are only called at the top level of function components or custom hooks. Flag hooks inside conditionals, loops, nested functions, or early-return branches. Check that hook call order is deterministic across renders — any conditional logic that changes the number of hooks called is a crash-level bug.\n\n## useEffect Dependency Arrays\n\nFor every `useEffect`, verify the dependency array is exhaustive. Flag missing dependencies that are read inside the effect body. Flag object or array literals created inline and passed as dependencies — these cause infinite re-render loops because they fail referential equality on every render. Check that functions used inside effects are either stable (from `useCallback`) or listed as dependencies.\n\nWhen the dependency array is empty `[]`, verify the effect genuinely runs only on mount. Flag effects with empty deps that read props or state — these capture stale values permanently.\n\n## Stale Closures\n\nCheck for closures that capture state or props values at render time and use them in async callbacks, timers, or event handlers that fire later. The captured value will be stale if the component re-renders before the callback fires. Flag patterns like:\n\n- `setTimeout(() => setState(count + 1), 1000)` where `count` is stale\n- Event listeners attached in `useEffect` that read state without the functional updater form\n- Async functions inside effects that use state variables captured at effect creation time\n\nRecommend functional updater form (`setState(prev => prev + 1)`) or `useRef` for values that must be current.\n\n## useMemo and useCallback Overuse\n\nFlag `useMemo` wrapping primitive computations (string concatenation, simple math) — the memoization overhead exceeds the computation cost. Flag `useCallback` on functions that are not passed as props to memoized child components — wrapping a function in `useCallback` is pointless if no consumer compares it by reference.\n\nConversely, flag expensive computations (array sorts, filters, transforms over large datasets) that are NOT memoized and run on every render.\n\n## Re-render Traps\n\nCheck for patterns that cause unnecessary re-renders:\n\n- Object or array spread in JSX props: `style={{ color: 'red' }}` creates a new object every render\n- Inline arrow functions as props to memoized children: `onClick={() => handleClick(id)}` defeats `React.memo`\n- Context providers with non-memoized value objects: `\u003CCtx.Provider value={{ a, b }}>` re-renders all consumers on every provider render\n- State updates inside render (not in effects or handlers) causing render loops\n\n## Custom Hook Patterns\n\nVerify custom hooks:\n\n- Return stable references when possible (memoize return objects\u002Farrays)\n- Do not trigger unnecessary re-renders in consuming components\n- Follow the `use` prefix naming convention\n- Do not contain side effects in the render path (only in effects or callbacks)\n- Expose cleanup mechanisms when they manage subscriptions or timers\n\n## State Management Anti-Patterns\n\nFlag these common mistakes:\n\n- Derived state stored in `useState` when it could be computed from existing state\u002Fprops\n- Multiple `useState` calls for related values that should be a single object or `useReducer`\n- State updated in both `useEffect` and event handlers for the same value (race condition)\n- Missing `useReducer` for complex state transitions that involve multiple related fields\n\n## Concurrent Mode and Strict Mode\n\nCheck whether the codebase enables React Strict Mode. If enabled, verify effects are idempotent — Strict Mode double-invokes effects in development to catch non-idempotent cleanup. Flag effects that assume they run exactly once when Strict Mode is active.\n\nFor each finding, report: the component name, the specific hook, the issue, and a concrete fix.\n","When reviewing React code, apply the following hook-specific checks systematically.\n\n## Rules of Hooks Violations\n\nVerify hooks are only called at the top level of function components or custom hooks. Flag hooks inside conditionals, loops, nested functions, or early-return branches. Check that hook call order is deterministic across renders — any conditional logic that changes the number of hooks called is a crash-level bug.\n\n## useEffect Dependency Arrays\n\nFor every `useEffect`, verify the dependency array is exhaustive. Flag missing dependencies that are read inside the effect body. Flag object or array literals created inline and passed as dependencies — these cause infinite re-render loops because they fail referential equality on every render. Check that functions used inside effects are either stable (from `useCallback`) or listed as dependencies.\n\nWhen the dependency array is empty `[]`, verify the effect genuinely runs only on mount. Flag effects with empty deps that read props or state — these capture stale values permanently.\n\n## Stale Closures\n\nCheck for closures that capture state or props values at render time and use them in async callbacks, timers, or event handlers that fire later. The captured value will be stale if the component re-renders before the callback fires. Flag patterns like:\n\n- `setTimeout(() => setState(count + 1), 1000)` where `count` is stale\n- Event listeners attached in `useEffect` that read state without the functional updater form\n- Async functions inside effects that use state variables captured at effect creation time\n\nRecommend functional updater form (`setState(prev => prev + 1)`) or `useRef` for values that must be current.\n\n## useMemo and useCallback Overuse\n\nFlag `useMemo` wrapping primitive computations (string concatenation, simple math) — the memoization overhead exceeds the computation cost. Flag `useCallback` on functions that are not passed as props to memoized child components — wrapping a function in `useCallback` is pointless if no consumer compares it by reference.\n\nConversely, flag expensive computations (array sorts, filters, transforms over large datasets) that are NOT memoized and run on every render.\n\n## Re-render Traps\n\nCheck for patterns that cause unnecessary re-renders:\n\n- Object or array spread in JSX props: `style={{ color: 'red' }}` creates a new object every render\n- Inline arrow functions as props to memoized children: `onClick={() => handleClick(id)}` defeats `React.memo`\n- Context providers with non-memoized value objects: `\u003CCtx.Provider value={{ a, b }}>` re-renders all consumers on every provider render\n- State updates inside render (not in effects or handlers) causing render loops\n\n## Custom Hook Patterns\n\nVerify custom hooks:\n\n- Return stable references when possible (memoize return objects\u002Farrays)\n- Do not trigger unnecessary re-renders in consuming components\n- Follow the `use` prefix naming convention\n- Do not contain side effects in the render path (only in effects or callbacks)\n- Expose cleanup mechanisms when they manage subscriptions or timers\n\n## State Management Anti-Patterns\n\nFlag these common mistakes:\n\n- Derived state stored in `useState` when it could be computed from existing state\u002Fprops\n- Multiple `useState` calls for related values that should be a single object or `useReducer`\n- State updated in both `useEffect` and event handlers for the same value (race condition)\n- Missing `useReducer` for complex state transitions that involve multiple related fields\n\n## Concurrent Mode and Strict Mode\n\nCheck whether the codebase enables React Strict Mode. If enabled, verify effects are idempotent — Strict Mode double-invokes effects in development to catch non-idempotent cleanup. Flag effects that assume they run exactly once when Strict Mode is active.\n\nFor each finding, report: the component name, the specific hook, the issue, and a concrete fix.\n",{"name":5,"license":15,"version":46,"triggers":47,"description":7},"2026.3.1",{"lenses":48,"keywords":49},[33,40],[24,25,50,51,52,53],"useState","useEffect","useMemo","useCallback","main","eac6069a8690d89fd23f08d2d14e4874ed376a77",".agent-orchestra\u002Fskills\u002Freact-hooks",0,"https:\u002F\u002Fgithub.com\u002Fmalayvuong\u002Fagent-orchestra","https:\u002F\u002Fgithub.com\u002Fmalayvuong","www.malayvuong.com","Just a newbie at everything","2026-10-09 12:52:45",{"source":8,"skillName":5,"commands":64,"prompt":74,"zipAvailable":75},[65,68,71],{"tool":66,"command":67},"npx","npx skills add malayvuong\u002Fagent-orchestra --skill \"React Hooks Review\"",{"tool":69,"command":70},"bunx","bunx skills add malayvuong\u002Fagent-orchestra --skill \"React Hooks Review\"",{"tool":72,"command":73},"pnpm","pnpm dlx skills add malayvuong\u002Fagent-orchestra --skill \"React Hooks Review\"","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmalayvuong\u002Fagent-orchestra\u002Fblob\u002Fmain\u002F.agent-orchestra\u002Fskills\u002Freact-hooks\u002FSKILL.md",true,[],[78,112,131,149,173,193],{"skillNo":79,"name":80,"nameZh":6,"description":81,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":96,"publishedAt":41},"01M6GXHYPRJ43SHFPFJTF87GS8","Vue.js Review","Deep review of Vue.js applications — Composition API patterns, reactivity traps, component design, Pinia state management, and performance pitfalls.","https:\u002F\u002Fgithub.com\u002Fmalayvuong\u002Fagent-orchestra\u002Fblob\u002Fmain\u002F.agent-orchestra\u002Fskills\u002Fvue-review\u002FSKILL.md",[84,85,88,91],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":86,"categoryName":87,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":89,"categoryName":90,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":92,"categoryName":93,"taxonomyType":94,"taxonomyTypeDesc":95},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[27,97,98,99,100,40,101,102,103,39,104,105,106,107,108,109,34,33,110,111],"vue","js","Vue js Review","design","component","state management","state","api patterns","applications","api","Composition","pinia","management","pitfalls","pinia state",{"skillNo":113,"name":114,"nameZh":6,"description":115,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":116,"categories":117,"keywords":118,"publishedAt":41},"01M6GXHSPDDH1PQEN61ENMCEF5","Unity Review","Deep review of Unity C# code — object pooling, Update allocation, physics patterns, UI performance, serialization, and mobile optimization.","https:\u002F\u002Fgithub.com\u002Fmalayvuong\u002Fagent-orchestra\u002Fblob\u002Fmain\u002F.agent-orchestra\u002Fskills\u002Funity-review\u002FSKILL.md",[],[27,119,114,40,120,121,39,122,123,124,125,35,126,34,33,127,128,129,130],"unity","update","code","ui","serialization","Optimization","mobile","physics","C#","mobile optimization","object","allocation",{"skillNo":132,"name":133,"nameZh":6,"description":134,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":135,"categories":136,"keywords":137,"publishedAt":41},"01M6GXHNKTH12CGSRWDGF2H1Q9","TypeScript Review","Deep review of TypeScript code — type safety, generics patterns, strict mode compliance, type narrowing, module boundaries, and common escape hatches.","https:\u002F\u002Fgithub.com\u002Fmalayvuong\u002Fagent-orchestra\u002Fblob\u002Fmain\u002F.agent-orchestra\u002Fskills\u002Ftypescript-review\u002FSKILL.md",[],[27,138,139,121,39,140,141,142,143,35,34,33,144,145,146,147,148],"typescript","typescript review","compliance","Type Safety","Safety","common","module","type","interface","consistency","mode",{"skillNo":150,"name":151,"nameZh":6,"description":152,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":153,"categories":154,"keywords":161,"publishedAt":41},"01M6GXHH3DMZD272RVH4800C67","Test Conventions","Testing patterns and conventions for code review. Covers naming, AAA structure, boundary testing, mock vs real dependencies, and coverage expectations.","https:\u002F\u002Fgithub.com\u002Fmalayvuong\u002Fagent-orchestra\u002Fblob\u002Fmain\u002F.agent-orchestra\u002Fskills\u002Ftest-conventions\u002FSKILL.md",[155,158],{"categoryNo":156,"categoryName":157,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":159,"categoryName":160,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",[162,163,151,164,165,27,121,166,167,168,35,169,170,171,172],"test","conventions","code review","testing","testing patterns","boundary","coverage","dependencies","structure","mock","naming",{"skillNo":174,"name":175,"nameZh":6,"description":176,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":177,"categories":178,"keywords":183,"publishedAt":41},"01M6GXHCAQSJDVNVRFFD1HJWTN","Terraform Review","Deep review of Terraform\u002FOpenTofu configuration — state management, module design, security hardening, drift prevention, and production safety patterns.","https:\u002F\u002Fgithub.com\u002Fmalayvuong\u002Fagent-orchestra\u002Fblob\u002Fmain\u002F.agent-orchestra\u002Fskills\u002Fterraform-review\u002FSKILL.md",[179,182],{"categoryNo":180,"categoryName":181,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":89,"categoryName":90,"taxonomyType":21,"taxonomyTypeDesc":22},[27,184,175,100,185,102,103,39,186,187,188,189,142,190,109,191,192,34,33,144],"terraform","security","cloud","aws","hardening","Production","opentofu","iac","drift",{"skillNo":194,"name":195,"nameZh":6,"description":196,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":197,"categories":198,"keywords":200,"publishedAt":41},"01M6GXH83F11CK4BQEAJPN6HDE","Swift Review","Deep review of Swift code — memory management, concurrency patterns, optionals, protocol design, SwiftUI lifecycle, and iOS platform patterns.","https:\u002F\u002Fgithub.com\u002Fmalayvuong\u002Fagent-orchestra\u002Fblob\u002Fmain\u002F.agent-orchestra\u002Fskills\u002Fswift-review\u002FSKILL.md",[199],{"categoryNo":89,"categoryName":90,"taxonomyType":21,"taxonomyTypeDesc":22},[201,27,195,100,202,40,121,203,39,204,205,206,207,208,109,34,33,209,210,211],"swift","memory","protocol","ios","concurrency","lifecycle","swiftui","uikit","xcode","apple","platform"]