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.

Workflow

1. Identify the highest-complexity area (state/effects/conditionals).
2. Extract one piece at a time.
3. Re-run lint/check/tests after each extraction.
4. Verify UI behavior before continuing.

Quality gates

• After dev/test/debug tasks, run: bun run build, bun run tsc (if available), bun run lint, bun run check.
• Follow Biome lint results; do not bypass.

Avoid

• Over-abstraction (tiny hooks with no reuse).
• Breaking existing patterns or exports.
• Mixing unrelated concerns in a single hook.