component-refactoring
Refactor Complex React Components
Complex React components become hard to test and maintain. This skill provides patterns and workflows to refactor high-complexity components by extracting hooks, splitting sub-components, and applying Dify-specific conventions.
Download the skill ZIP
Upload in Claude
Go to Settings → Capabilities → Skills → Upload skill
Toggle on and start using
Test it
Using "component-refactoring". Analyze complexity of web/app/components/workflow/index.tsx
Expected outcome:
Complexity Analysis:
- Total Complexity: 72 (target: <50)
- Max Function Complexity: 28
- Line Count: 420 (target: <300)
Top Complexity Drivers:
1. handleSubmit callback: +15 complexity (nested conditions)
2. useEffect for data sync: +12 complexity (nested callbacks)
3. render methods: +10 complexity (switch/case chains)
Recommended Actions:
1. Extract useWorkflowState hook
2. Split form handling into separate component
3. Move data sync logic to useEffect hook
Using "component-refactoring". Extract hooks from ConfigurationForm component
Expected outcome:
Extracted Hooks:
- useModelConfig: Manages model configuration state
- useDatasetSelection: Handles dataset picker logic
- useFormValidation: Form validation logic
File Structure:
web/app/components/form/
hooks/
use-model-config.ts
use-dataset-selection.ts
use-form-validation.ts
ConfigurationForm.tsx
index.ts
Security Audit
SafeThis is a documentation and guidance skill for React component refactoring. Static analyzer flagged 214 potential issues in markdown documentation files, all of which are false positives: backticks in code examples were detected as shell commands, code patterns triggered crypto/blocker alerts, and Object.keys() was flagged as certificate/key files. The skill provides reference documentation only and does not execute any code.
Quality Score
What You Can Build
Reduce Component Complexity
When a React component exceeds complexity threshold (>50) or line count (>300), use this skill to systematically reduce complexity through hook extraction and component splitting.
Standardize Hook Patterns
Apply Dify conventions for organizing custom hooks in hooks/ subdirectories or alongside components with use- prefix naming.
Prepare Components for Testing
Refactor complex components before writing tests to ensure components are testable and meet complexity thresholds.
Try These Prompts
Check the complexity of web/app/components/example.tsx using pnpm analyze-component. What is the complexity score and what are the main complexity drivers?
Analyze web/app/components/form-config/index.tsx and identify opportunities to extract custom hooks. Show me the proposed hook structure with Dify conventions.
The Configuration component at web/app/components/config/index.tsx has complexity 85. Suggest how to split it into sub-components while maintaining Dify patterns.
Run pnpm analyze-component on web/app/components/app/configuration/index.tsx and generate a complete refactoring plan including hook extractions, sub-component splits, and complexity reduction targets.
Best Practices
- Run complexity analysis before refactoring to establish baseline metrics
- Extract hooks early when state management exceeds 3-5 useState calls
- Follow Dify naming conventions: hooks in hooks/ dir or use-*.ts prefix
Avoid
- Refactoring components that already meet complexity thresholds unnecessarily
- Extracting hooks that are only used in a single component (prefer inline)
- Creating too many small components that hurt code navigation