modèles-de-composition-react

Modèles de Composition React

Modèles de composition pour construire des composants React flexibles et maintenables. Évitez la prolifération de props booléennes en utilisant des composés (compound components), le levage d'état (lifting state) et la composition des internes. Ces modèles rendent les bases de code plus faciles à utiliser, tant pour les humains que pour les agents IA, à mesure qu'elles passent à l'échelle.

Quand appliquer

Consultez ces directives lorsque :

• Vous refactorez des composants avec de nombreuses props booléennes
• Vous construisez des bibliothèques de composants réutilisables
• Vous concevez des API de composants flexibles
• Vous révisez l'architecture de composants
• Vous travaillez avec des composés ou des fournisseurs de contexte

Catégories de règles par priorité

Priorité	Catégorie	Impact	Préfixe
1	Architecture des composants	ÉLEVÉ	architecture-
2	Gestion d'état	MOYEN	state-
3	Modèles d'implémentation	MOYEN	patterns-
4	API React 19	MOYEN	react19-

Référence rapide

1. Architecture des composants (ÉLEVÉ)

• architecture-eviter-props-booleennes - N'ajoutez pas de props booléennes pour personnaliser le comportement ; utilisez la composition.
• architecture-composés - Structurez les composants complexes avec un contexte partagé.

2. Gestion d'état (MOYEN)

• état-découpler-implémentation - Le fournisseur (provider) est le seul endroit qui sait comment l'état est géré.
• état-interface-contexte - Définissez une interface générique avec état, actions, métadonnées pour l'injection de dépendances.
• état-lever-état - Déplacez l'état dans des composants fournisseurs pour un accès entre frères.

3. Modèles d'implémentation (MOYEN)

• modèles-variantes-explicites - Créez des composants de variante explicites au lieu de modes booléens.
• modèles-enfants-plutôt-que-render-props - Utilisez les enfants pour la composition au lieu des props renderX.

4. API React 19 (MOYEN)

⚠️ React 19+ uniquement. Ignorez cette section si vous utilisez React 18 ou une version antérieure.

• react19-pas-de-forwardRef - N'utilisez pas forwardRef ; utilisez use() à la place de useContext().

Comment utiliser

Lisez les fichiers de règles individuels pour des explications détaillées et des exemples de code :

rules/architecture-eviter-props-booleennes.md
rules/état-interface-contexte.md

Chaque fichier de règle contient :

• Une brève explication de pourquoi c'est important
• Un exemple de code incorrect avec explication
• Un exemple de code correct avec explication
• Contexte supplémentaire et références

Document complet compilé

Pour le guide complet avec toutes les règles développées : AGENTS.md