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, en remontant l'état, et en composant les internals. Ces modèles rendent les bases de code plus faciles à utiliser pour les humains et les agents IA à mesure qu'elles évoluent.

Quand appliquer

Référencez ces directives quand :

• Vous refactorisez 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 examinez l'architecture des composants
• Vous travaillez avec des composants composés ou des providers de contexte

Catégories de règles par priorité

Référence rapide

1. Architecture 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 du contexte partagé

2. Gestion d'état (MOYEN)

• state-decouple-implementation - Le Provider 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, meta pour l'injection de dépendances
• state-lift-state - Remontez l'état dans les composants provider pour l'accès entre frères

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

• patterns-explicit-variants - Créez des composants de variant 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 individuelles 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 :

• Brève explication de son importance
• Exemple de code incorrect avec explication
• 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