Context und useContext

Teil des React-Kurses

Deine Anwendung hat einen Schalter für den Dark Mode. Der Schalter sitzt im Einstellungsbereich, aber wissen muss davon ein Button acht Komponenten tief in einer Tabelle in einer Karte auf einer Seite. Um den Wert per Props von hier nach dort zu bringen, muss jede einzelne Komponente dazwischen ein theme-Prop annehmen, das sie selbst nie benutzt, und es direkt weiterreichen.

React hat dafür einen offiziellen Ausweg, und der heißt Kontext: ein Wert, der an einer Stelle im Komponentenbaum veröffentlicht wird und den jede Komponente darunter direkt lesen kann, egal wie tief, ohne dass jemand dazwischen ihn weiterreicht. Das passende Bild ist eine Radioübertragung. Ein Sender strahlt auf einer Frequenz aus, und jedes Empfangsgerät in Reichweite stellt sich direkt darauf ein.