Component Refactoring Skill Refactor high-complexity React components with the patterns and workflow below. Core Refactoring Patterns Pattern 1: Extract Custom Hooks When : Component has complex state management, multiple / , or business logic mixed with UI. Dify Convention : Place hooks in a subdirectory or alongside the component as . Pattern 2: Extract Sub-Components When : Single component has multiple UI sections, conditional rendering blocks, or repeated patterns. Pattern 3: Simplify Conditional Logic When : Deep nesting ( 3 levels), complex ternaries, or multiple chains. Pattern 4: Ext…