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

• Extract hooks for state/effects/data logic.

• Split UI sections into subcomponents.

• Simplify conditionals with lookup tables/early returns.

• Move API/data logic into query hooks.

• Extract modal/dialog state into a dedicated hook.

• Extract form logic into TanStack Form hooks.

Workflow

• Identify the highest-complexity area (state/effects/conditionals).

• Extract one piece at a time.

• Re-run lint/check/tests after each extraction.

• 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.