Component Refactoring Skill

When to use

• Large components (>300 lines) or complex nested conditionals.
• Mixed UI + data fetching + state logic in one file.
• Re-renders are hard to reason about.

Refactoring patterns

1. Extract hooks for state/effects/data logic.
2. Split UI sections into subcomponents.
3. Simplify conditionals with lookup tables/early returns.
4. Move API/data logic into query hooks.
5. Extract modal/dialog state into a dedicated hook.
6. Extract form logic into TanStack Form hooks.