Modèles de Composition React

Que fait 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 composants composés, le levage d'état et la composition interne. Ces modèles rendent les bases de code plus faciles à travailler tant pour les humains que pour les agents IA à mesure qu'elles évoluent.

Quand Appliquer

Référez-vous à 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 APIs de composants flexibles
• Vous révisez l'architecture de composants
• Vous travaillez avec des composants composés ou des fournisseurs de contexte

Catégories de Règles par Priorité

Priorité	Catégorie	Impact	Préfixe
1	Architecture de Composants	ÉLEVÉ	architecture-
2	Gestion d'État	MOYEN	state-
3	Modèles d'Implémentation	MOYEN	patterns-
4	APIs React 19	MOYEN	react19-

Référence Rapide

1. Architecture de Composants (ÉLEVÉ)

• architecture-avoid-boolean-props - N'ajoutez pas de props booléennes pour personnaliser le comportement ; utilisez la composition
• architecture-compound-components - Structurez les composants complexes avec un contexte partagé

2. Gestion d'État (MOYEN)

• state-decouple-implementation - Le fournisseur est le seul endroit qui sait comment l'état est géré
• state-context-interface - Définissez une interface générique avec état, actions, métadonnées pour l'injection de dépendances
• state-lift-state - Déplacez l'état dans les composants fournisseurs pour un accès entre frères

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

• patterns-explicit-variants - Créez des composants de variante explicites au lieu de modes booléens
• patterns-children-over-render-props - Utilisez children pour la composition au lieu des props renderX

4. APIs React 19 (MOYEN)

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

• react19-no-forwardref - N'utilisez pas forwardRef ; utilisez use() au lieu de useContext()

Comment Utiliser

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

rules/architecture-avoid-boolean-props.md
rules/state-context-interface.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
• Du contexte supplémentaire et des références

Document Compilé Complet

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