Grundlagen von Context und Prop Drilling vermeiden

Ziel: Teilen Sie Werte wie Theme, User und Locale im gesamten Komponentenbaum, ohne Props durch mehrere Ebenen weiterreichen zu müssen.

• Einen Context erstellen
• Mit einem Provider umschließen
• Über useContext auslesen

Prop Drilling bedeutet, Props durch Ebenen weiterzureichen, die sie nicht benötigen. Das macht den Code unübersichtlich und erschwert Refactorings.

Erstellen Sie einen ThemeContext, stellen Sie theme an der obersten Ebene bereit und lesen Sie den Wert tief im Komponentenbaum mit useContext aus.

Tipps:

• Halten Sie Context-Werte klein, etwa theme, ein user-Objekt oder kleine Aktionen.
• Umschließen Sie nur die benötigten Bereiche, damit erneute Renderings lokal bleiben.
• Benennen Sie Provider und Hook eindeutig, etwa ThemeProvider und useTheme.

Erstellen Sie einen kleinen useTheme-Hook, damit der Context nicht überall importiert werden muss. Intern ruft er lediglich useContext auf.

Vermeiden Sie Context für:

• Hochdynamische, sich häufig ändernde Werte, die viele erneute Renderings auslösen
• Lokalen State, der von nur einer Komponente verwendet wird
• Sehr große Objekte – geben Sie nur weiter, was die untergeordneten Komponenten benötigen

Zusammenfassung: Erstellen Sie einen Context, stellen Sie einen Wert nahe der obersten Ebene bereit und lesen Sie ihn tief im Komponentenbaum mit useContext oder einem Hilfs-Hook aus, um wiederholtes Weiterreichen von Props zu vermeiden.