[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FEG16HV03RGXQG2D568PWS":3,"skill-same:01M6FEG16HV03RGXQG2D568PWS":56},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":25,"publishedAt":29,"linkOnly":30,"markdownContent":31,"markdownBody":31,"frontMatter":32,"refName":33,"commitSha":34,"skillDirectory":35,"forksCount":36,"repositoryHtmlUrl":37,"repositoryHomepageUrl":38,"ownerHtmlUrl":39,"ownerBlogUrl":6,"ownerDescription":40,"updatedAt":41,"install":42,"resources":55},"01M6FEG16HV03RGXQG2D568PWS","react-refactor",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fpproenca\u002Fdot-skills\u002Freact-refactor\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000007","代码审查","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",[26,27,28],"react","refactor","react refactor","2026-11-10 10:12:30",false,"# React Refactor Best Practices\n\nArchitectural refactoring guide for React applications. Contains 40 rules across 7 categories, prioritized by impact from critical (component and state architecture) to incremental (refactoring safety).\n\n## When to Apply\n\n- Refactoring existing React codebases or planning large-scale restructuring\n- Reviewing PRs for architectural issues and code smells\n- Decomposing oversized components into focused units\n- Extracting reusable hooks from component logic\n- Improving testability of React code\n- Reducing coupling between feature modules\n\n## Rule Categories\n\n| Category | Impact | Rules | Key Topics |\n|----------|--------|-------|------------|\n| Component Architecture | CRITICAL | 8 | Compound components, headless pattern, composition over props, client boundaries |\n| State Architecture | CRITICAL | 7 | Colocation, state machines, URL state, derived values |\n| Hook Patterns | HIGH | 6 | Single responsibility, naming, dependency stability, composition |\n| Component Decomposition | HIGH | 6 | Scroll test, extraction by change reason, view\u002Flogic separation |\n| Coupling & Cohesion | MEDIUM | 4 | Dependency injection, circular deps, stable imports, barrel-free |\n| Data & Side Effects | MEDIUM | 4 | Server-first fetch, TanStack Query, error boundaries |\n| Refactoring Safety | LOW-MEDIUM | 5 | Characterization tests, behavior testing, integration tests |\n\n## Quick Reference\n\n**Critical patterns** — get these right first:\n- Use compound components instead of props explosion\n- Colocate state with the components that use it\n- Use state machines for complex UI workflows\n- Separate container logic from presentational components\n\n**Common mistakes** — avoid these anti-patterns:\n- Lifting state to App when only one component reads it\n- Using context for rapidly-changing values\n- Monolithic hooks that fetch + transform + cache\n- Testing implementation details instead of behavior\n\n## Table of Contents\n\n1. [Component Architecture](references\u002F_sections.md#1-component-architecture) — **CRITICAL**\n   - 1.1 [Apply Interface Segregation to Component Props](references\u002Farch-interface-segregation.md) — CRITICAL (prevents 30-50% of unnecessary re-renders)\n   - 1.2 [Colocate Files by Feature Instead of Type](references\u002Farch-feature-colocation.md) — CRITICAL (reduces cross-directory navigation by 70%)\n   - 1.3 [Convert Render Props to Custom Hooks](references\u002Farch-render-props-to-hooks.md) — CRITICAL (eliminates 2-4 levels of nesting)\n   - 1.4 [Extract Headless Components for Logic Reuse](references\u002Farch-headless-pattern.md) — CRITICAL (5x more reuse scenarios)\n   - 1.5 [Prefer Composition Over Props Explosion](references\u002Farch-composition-over-props.md) — CRITICAL (reduces prop count by 50-70%)\n   - 1.6 [Separate Container Logic from Presentational Components](references\u002Farch-container-presentational.md) — CRITICAL (enables independent testing)\n   - 1.7 [Use Compound Components for Implicit State Sharing](references\u002Farch-compound-components.md) — CRITICAL (reduces API surface by 60%)\n   - 1.8 [Push Client Boundaries to Leaf Components](references\u002Farch-push-client-low.md) — HIGH (keeps 60-80% server-rendered)\n2. [State Architecture](references\u002F_sections.md#2-state-architecture) — **CRITICAL**\n   - 2.1 [Colocate State with Components That Use It](references\u002Fstate-colocate-with-consumers.md) — CRITICAL (reduces prop passing by 60%)\n   - 2.2 [Derive Values Instead of Syncing State](references\u002Fstate-derive-dont-sync.md) — CRITICAL (eliminates double-render cycle)\n   - 2.3 [Lift State Only When Multiple Components Read It](references\u002Fstate-lift-only-when-shared.md) — CRITICAL (eliminates unnecessary parent re-renders)\n   - 2.4 [Use Context for Rarely-Changing Values Only](references\u002Fstate-context-for-static.md) — CRITICAL (5-50x fewer re-renders)\n   - 2.5 [Use State Machines for Complex UI Workflows](references\u002Fstate-machines-for-workflows.md) — CRITICAL (reduces valid states from 2^n to N)\n   - 2.6 [Use URL Parameters as State for Shareable Views](references\u002Fstate-url-as-state.md) — CRITICAL (enables deep linking and sharing)\n   - 2.7 [Use useReducer for Multi-Field State Transitions](references\u002Fstate-reducer-for-complex.md) — CRITICAL (eliminates impossible states)\n3. [Hook Patterns](references\u002F_sections.md#3-hook-patterns) — **HIGH**\n   - 3.1 [Avoid Object and Array Dependencies in Custom Hooks](references\u002Fhook-avoid-object-deps.md) — HIGH (prevents effect re-execution every render)\n   - 3.2 [Compose Hooks Instead of Nesting Them](references\u002Fhook-composition-over-nesting.md) — HIGH (flattens dependency graph)\n   - 3.3 [Extract Logic into Custom Hooks When Behavior Is Nameable](references\u002Fhook-extract-when-nameable.md) — HIGH (40-60% shorter components)\n   - 3.4 [Follow Hook Naming Conventions for Discoverability](references\u002Fhook-naming-conventions.md) — HIGH (reduces navigation time by 40%)\n   - 3.5 [Keep Custom Hooks to a Single Responsibility](references\u002Fhook-single-responsibility.md) — HIGH (3x easier to test)\n   - 3.6 [Stabilize Hook Dependencies with Refs and Callbacks](references\u002Fhook-dependency-stability.md) — HIGH (prevents infinite loops)\n4. [Component Decomposition](references\u002F_sections.md#4-component-decomposition) — **HIGH**\n   - 4.1 [Apply the Scroll Test to Identify Oversized Components](references\u002Fdecomp-scroll-test.md) — HIGH (3x faster code review)\n   - 4.2 [Complete Component Extraction Without Half-Measures](references\u002Fdecomp-complete-extraction.md) — HIGH (enables independent testing and reuse)\n   - 4.3 [Extract Components by Independent Change Reasons](references\u002Fdecomp-extract-by-change-reason.md) — HIGH (70% fewer files touched per change)\n   - 4.4 [Extract Pure Functions from Component Bodies](references\u002Fdecomp-extract-pure-functions.md) — HIGH (10x faster unit tests)\n   - 4.5 [Inline Premature Abstractions Before Re-Extracting](references\u002Fdecomp-inline-premature.md) — HIGH (40-60% simpler code)\n   - 4.6 [Separate View Layer from Business Logic](references\u002Fdecomp-separate-view-logic.md) — HIGH (5x faster test suite)\n5. [Coupling & Cohesion](references\u002F_sections.md#5-coupling--cohesion) — **MEDIUM**\n   - 5.1 [Break Circular Dependencies with Intermediate Modules](references\u002Fcouple-break-circular-deps.md) — MEDIUM (eliminates undefined-at-import-time bugs)\n   - 5.2 [Import from Stable Public API Surfaces Only](references\u002Fcouple-stable-imports.md) — MEDIUM (enables internal refactoring)\n   - 5.3 [Use Barrel-Free Feature Modules for Clean Dependencies](references\u002Fcouple-barrel-free-features.md) — MEDIUM (200-800ms build reduction)\n   - 5.4 [Use Dependency Injection for External Services](references\u002Fcouple-dependency-injection.md) — MEDIUM (3x faster test setup)\n6. [Data & Side Effects](references\u002F_sections.md#6-data--side-effects) — **MEDIUM**\n   - 6.1 [Fetch Data on the Server by Default](references\u002Fdata-server-first-fetch.md) — MEDIUM (reduces client JS by 30-60%)\n   - 6.2 [Place Error Boundaries at Data Fetch Granularity](references\u002Fdata-granular-error-boundaries.md) — MEDIUM (errors isolated to affected section)\n   - 6.3 [Use Context Module Pattern for Action Colocation](references\u002Fdata-context-module-pattern.md) — MEDIUM (centralizes data mutations)\n   - 6.4 [Use TanStack Query for Client-Side Server State](references\u002Fdata-tanstack-query-client.md) — MEDIUM (eliminates 80% of fetch boilerplate)\n7. [Refactoring Safety](references\u002F_sections.md#7-refactoring-safety) — **LOW-MEDIUM**\n   - 7.1 [Avoid Snapshot Tests for Refactored Components](references\u002Fsafety-snapshot-free.md) — LOW-MEDIUM (eliminates false test failures)\n   - 7.2 [Extract Pure Functions to Increase Testability](references\u002Fsafety-extract-pure-testability.md) — LOW-MEDIUM (10x faster test execution)\n   - 7.3 [Prefer Integration Tests for Component Verification](references\u002Fsafety-integration-over-unit.md) — LOW-MEDIUM (catches 40% more bugs)\n   - 7.4 [Test Component Behavior Not Implementation Details](references\u002Fsafety-test-behavior.md) — LOW-MEDIUM (5x fewer test updates)\n   - 7.5 [Write Characterization Tests Before Refactoring](references\u002Fsafety-characterization-tests.md) — LOW-MEDIUM (catches 90% of unintended changes)\n\n## References\n\n1. [https:\u002F\u002Freact.dev](https:\u002F\u002Freact.dev)\n2. [https:\u002F\u002Freact.dev\u002Flearn\u002Fthinking-in-react](https:\u002F\u002Freact.dev\u002Flearn\u002Fthinking-in-react)\n3. [https:\u002F\u002Fkentcdodds.com\u002Fblog\u002Fapplication-state-management-with-react](https:\u002F\u002Fkentcdodds.com\u002Fblog\u002Fapplication-state-management-with-react)\n4. [https:\u002F\u002Ftesting-library.com\u002Fdocs\u002Fguiding-principles](https:\u002F\u002Ftesting-library.com\u002Fdocs\u002Fguiding-principles)\n5. [https:\u002F\u002Fpatterns.dev](https:\u002F\u002Fpatterns.dev)\n\n## Related Skills\n\n- For React 19 API best practices, see `react` skill\n- For application performance optimization, see `react-optimise` skill\n- For client-side form handling, see `react-hook-form` skill\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fpproenca\u002Fdot-skills\u002Freact-refactor",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":43,"prompt":53,"zipAvailable":54},[44,47,50],{"tool":45,"command":46},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill react-refactor",{"tool":48,"command":49},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill react-refactor",{"tool":51,"command":52},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill react-refactor","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fpproenca\u002Fdot-skills\u002Freact-refactor\u002FSKILL.md",true,[],[57,69,79,88,94,101],{"skillNo":58,"name":59,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":60,"categories":61,"keywords":65,"publishedAt":29},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[62],{"categoryNo":63,"categoryName":64,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[66,67,68],"model","model hierarchy","model hierarchy skill",{"skillNo":70,"name":71,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":75,"publishedAt":29},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[74],{"categoryNo":63,"categoryName":64,"taxonomyType":20,"taxonomyTypeDesc":21},[76,77,78],"MCP","zoom","zoom mcp",{"skillNo":80,"name":81,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":84,"publishedAt":29},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[85,86,87,77],"sdk","zoom apps sdk","apps",{"skillNo":89,"name":90,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":91,"categories":92,"keywords":93,"publishedAt":29},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[90],{"skillNo":95,"name":96,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":100,"publishedAt":29},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[99],{"categoryNo":63,"categoryName":64,"taxonomyType":20,"taxonomyTypeDesc":21},[96],{"skillNo":102,"name":103,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":104,"categories":105,"keywords":106,"publishedAt":29},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[103]]