How to Refactor Large React Components in Dify with component-refactoring

React components exceeding 300 lines or with complexity scores above 50 pose maintainability and testability challenges. Knowing where to start the refactoring process is not straightforward.

This article explains how to analyze and refactor complex React components using the component-refactoring skill from the Dify repository.

What This Skill Does

component-refactoring refactors high-complexity React components in the Dify frontend:

• Quantitative complexity analysis (pnpm analyze-component)
• Refactoring patterns: custom hook extraction, sub-component splitting, and more
• Auto-generated refactoring instructions (pnpm refactor-component)
• Complexity score-based prioritization (0-25: simple, 26-50: medium, 51+: needs refactoring)

Suited for developers improving Dify frontend maintainability.

Installation

Prerequisites

• Claude Code installed
• Access to Dify project (web/ directory)

Install Command

Copyclaude mcp add github.com/langgenius/dify/tree/main/.claude/skills/component-refactoring

Usage

Analyzing Complexity

Copycd web
pnpm analyze-component src/components/LargeComponent.tsx
pnpm analyze-component src/components/LargeComponent.tsx --json

Generating Refactoring Instructions

Copypnpm refactor-component src/components/LargeComponent.tsx

Key Refactoring Patterns

1. Custom hook extraction - Separate complex state into hooks/use-<feature>.ts
2. Sub-component splitting - Break monolithic JSX into smaller components
3. Conditional simplification - Replace nested ternaries with lookup tables
4. API/data logic separation - Use @tanstack/react-query for data fetching
5. Modal management separation - Consolidate multiple boolean states
6. Form logic separation - Use @tanstack/react-form for form handling

Dify-Specific Conventions

• Hooks placed in hooks/ subdirectory or use-<feature>.ts
• React Query uses NAME_SPACE for query keys
• Invalidation hooks exported as useInvalidXxx

Important Considerations

Check Complexity Score First

Always run analyze-component before refactoring. Scores under 25 are better served by writing tests first.

Dify Project-Specific Tools

analyze-component and refactor-component are Dify project scripts. They are not available in other projects.

Refactor Incrementally

Apply one pattern at a time → test → next pattern. Do not change everything at once.

Summary

component-refactoring enables systematic React component refactoring in Dify frontend based on complexity analysis. Incremental application of 6 refactoring patterns improves maintainability and testability.

Related Links

→ component-refactoring Skill Details