SOLID appliqué au front React : 5 règles concrètes
SOLID n'est pas réservé au back. Appliqué à React, il évite 80% des refactos douloureux.
S — Single Responsibility
1 composant = 1 raison de changer. UserCard qui affiche + fetch + valide → split en useUser() hook + UserCard présentation + UserForm édition.
O — Open/Closed
Composant ouvert à l'extension via props (variants, children, render props), fermé à la modification. shadcn/ui = pattern parfait : au lieu de
L — Liskov Substitution
custom doit accepter toutes les props HTML . Sinon, polymorphism cassé. Pattern : ...props spread sur l'élément racine.
I — Interface Segregation
Props minimales et ciblées.
D — Dependency Inversion
Composants haut-niveau ne dépendent pas de fetch concret. Injection via hook (useUsersRepository) ou contexte. Permet de mocker en test sans toucher au composant.
Anti-pattern : God Component
Partager