vercel-composition-patterns

React-Kompositionsmuster

Kompositionsmuster zum Erstellen flexibler, wartbarer React-Komponenten. Vermeiden Sie die Proliferation boolescher Props durch die Verwendung von Compound Components, State Lifting und dem Zusammensetzen interner Strukturen. Diese Muster machen Codebasen sowohl für Menschen als auch für KI-Agenten einfacher handhabbar, wenn sie skalieren.

Wann anwenden

Beachten Sie diese Richtlinien, wenn:

• Komponenten mit vielen booleschen Props umgestaltet werden
• Wiederverwendbare Komponentenbibliotheken erstellt werden
• Flexible Komponenten-APIs entworfen werden
• Die Komponentenarchitektur überprüft wird
• Mit Compound Components oder Context-Providern gearbeitet wird

Regelkategorien nach Priorität

Priorität	Kategorie	Auswirkung	Präfix
1	Komponentenarchitektur	HOCH	architecture-
2	State-Management	MITTEL	state-
3	Implementierungsmuster	MITTEL	patterns-
4	React 19 APIs	MITTEL	react19-

Kurzreferenz

1. Komponentenarchitektur (HOCH)

• architecture-avoid-boolean-props - Fügen Sie keine booleschen Props hinzu, um Verhalten anzupassen; verwenden Sie Komposition.
• architecture-compound-components - Strukturieren Sie komplexe Komponenten mit gemeinsam genutztem Context.

2. State-Management (MITTEL)

• state-decouple-implementation - Der Provider ist der einzige Ort, der weiß, wie der State verwaltet wird.
• state-context-interface - Definieren Sie ein generisches Interface mit State, Aktionen und Metadaten für Dependency Injection.
• state-lift-state - Verlagern Sie State in Provider-Komponenten, um ihn Geschwisterkomponenten zugänglich zu machen.

3. Implementierungsmuster (MITTEL)

• patterns-explicit-variants - Erstellen Sie explizite Variantenkomponenten anstelle von booleschen Modi.
• patterns-children-over-render-props - Verwenden Sie Children für Komposition anstelle von renderX-Props.

4. React 19 APIs (MITTEL)

⚠️ Nur React 19+. Überspringen Sie diesen Abschnitt bei React 18 oder älter.

• react19-no-forwardref - Verwenden Sie nicht forwardRef; nutzen Sie use() anstelle von useContext().

So verwenden Sie es

Lesen Sie einzelne Regeldateien für detaillierte Erklärungen und Codebeispiele:

rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md

Jede Regeldatei enthält:

• Kurze Erklärung, warum es wichtig ist
• Falsches Codebeispiel mit Erklärung
• Korrektes Codebeispiel mit Erklärung
• Zusätzlicher Kontext und Referenzen

Vollständiges kompiliertes Dokument

Für die vollständige Anleitung mit allen erweiterten Regeln: AGENTS.md