De 800 lignes à une architecture propre — refactoring de 16 écrans

Il y a un moment où tu ouvres un fichier et tu sens physiquement le poids de la dette technique. Mon écran principal faisait 800 lignes. Un seul fichier. Tout mélangé.

La stratégie de découpage

J'ai refactoré 16 écrans en suivant une structure consistante : un hook custom pour la logique métier, des sous-composants pour le rendu, un composant principal pour l'orchestration. Le hook transforme un composant de 800 lignes en 100 lignes.

ESLint : de 71 à 0

En parallèle, j'ai lancé ESLint sur le backend. 71 erreurs. Pas en désactivant les règles — en corrigeant le code. Chaque any remplacé par un type explicite. Chaque promesse correctement awaited.

Pourquoi maintenant ?

"Tu es seul, qui va lire ce code ?" Moi. Moi dans trois mois quand j'aurai oublié pourquoi cet écran fait ce qu'il fait. La dette technique n'est pas une métaphore. C'est un coût réel qui se paie en temps, en bugs, et en motivation.

Après le refactoring : 16 écrans propres, 0 erreur ESLint, une architecture que je peux expliquer en 30 secondes. La meilleure semaine du projet.