From 800 lines to a clean architecture — refactoring 16 screens

There comes a time when you open a file and physically feel the weight of technical debt. My main screen was 800 lines. A single file. All mixed up.

The Decomposition Strategy

I refactored 16 screens following a consistent structure: a custom hook for business logic, sub-components for rendering, a main component for orchestration. The hook transforms an 800-line component into 100 lines.

ESLint: from 71 to 0

In parallel, I ran ESLint on the backend. 71 errors. Not by disabling rules — by fixing the code. Every any replaced by an explicit type. Every promise correctly awaited.

Why Now?

"You're alone, who's going to read this code?" Me. Me in three months when I've forgotten why this screen does what it does. Technical debt is not a metaphor. It's a real cost paid in time, bugs, and motivation.

After refactoring: 16 clean screens, 0 ESLint errors, an architecture I can explain in 30 seconds. The best week of the project.