component-refactoring

This Skill refactors complex React components by applying custom hook extraction, sub-component splitting, and conditional logic simplification patterns. It targets components with complexity scores above 50 or line counts exceeding 300 lines to improve maintainability.

Extract custom hooks when React components reach high complexity scores or exceed 300 lines. This refactoring pattern isolates business logic from rendering, improving testability and reducing overall component complexity for large frontend applications.

The best way to split large React components is by extracting sub-components and simplifying conditional logic. This approach breaks down files exceeding complexity thresholds into smaller, testable pieces while preserving established frontend rendering patterns.

No, this refactoring approach skips simple React components and explicitly ignores user requests for testing without refactoring. It specifically targets high-complexity components to ensure meaningful structural improvements rather than unnecessary modifications.

Reduce TypeScript frontend code complexity by applying patterns like custom hook extraction and sub-component splitting. This process targets components with high complexity scores, breaking them down to enhance code quality and performance.