React Academy · Lektion

Wann Sie Context nicht verwenden sollten

Erkennen Sie Fälle, in denen Prop-Weitergabe, Composition oder ein State-Manager besser geeignet sind.

Lektion 4 von 413 Schritte

Wann Sie Context nicht verwenden sollten ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Willkommen

In dieser Lektion lernen Sie, wann React Context das falsche Werkzeug ist, und erkennen Situationen, in denen die Übergabe von Props, Komposition oder ein State-Manager die bessere und einfachere Lösung darstellt.

Context ist kein Allheilmittel

Context wird häufig übermäßig eingesetzt. Entwickler greifen darauf zurück, um jegliche Weitergabe von Props zu vermeiden. Dadurch entstehen jedoch versteckte Abhängigkeiten, Komponenten lassen sich schwieriger testen und die Performance kann leiden.

Wann Props besser geeignet sind

Wenn ein Wert von 1–3 eng verschachtelten Komponenten verwendet wird, ist die Weitergabe von Props einfacher, expliziter und leichter nachzuverfolgen. Context fügt zusätzliches Provider-Boilerplate hinzu und verbirgt den Datenfluss.

// Don't need Context for this
function Page() {
  const [color, setColor] = useState('blue');
  return <Header color={color} />; // simple, clear
}

Wann Composition besser geeignet ist

Wenn Sie das Durchreichen von Props durch 3 oder mehr Ebenen vermeiden müssen, versuchen Sie es zuerst mit Composition: Übergeben Sie den vollständig gerenderten Consumer als Prop. Dafür ist kein Context erforderlich, und der Datenfluss bleibt explizit.

Context erzeugt versteckte Kopplung

Eine Komponente, die useContext(UserCtx) aufruft, kann nicht wiederverwendet werden, ohne sie in einen UserProvider einzuschließen. Props machen Abhängigkeiten explizit – anhand der Signatur sehen Sie genau, was eine Komponente benötigt.

Häufige Aktualisierungen

Verwenden Sie Context nicht für Werte, die sich viele Male pro Sekunde ändern, zum Beispiel die Mausposition oder den Animationsfortschritt. Jede Änderung rendert alle Consumer neu. Verwenden Sie stattdessen Refs, externe Stores oder eine signalbasierte Bibliothek.

Context ist kein State-Manager

Context verteilt lediglich Werte – integriertes Caching, Devtools oder Middleware bietet es nicht. Verwenden Sie für komplexen gemeinsamen State mit häufigen Aktualisierungen Zustand, Redux oder Jotai, da diese Lösungen genau dafür entwickelt wurden.

Server-State gehört nicht in Context

Daten, die von einem Server abgerufen werden, etwa eine Benutzerliste oder Beiträge, gehören nicht in Context. React Query, SWR oder RTK Query verwalten Server-State mit Caching, Neuladen im Hintergrund und Fehlerzuständen – Context bietet keine dieser Funktionen.

Formular-State gehört nicht in Context

Wenn Sie Formularfelder in Context verwalten, wird bei jeder Eingabe alle Context-Consumer neu gerendert. Verwenden Sie stattdessen lokalen State der Komponente oder eine Formularbibliothek wie React Hook Form.

Wann Context DAS RICHTIGE WERKZEUG ist

Context eignet sich ideal für den aktuellen Benutzer- oder Authentifizierungsstatus, das Theme (hell/dunkel), die Locale/i18n und andere stabile querschnittliche Werte, die viele Komponenten lesen, sich aber nur selten ändern.

Kurze Überprüfung

Welcher Datentyp eignet sich AM WENIGSTEN dafür, in React Context gespeichert zu werden?

Beantworte es in der interaktiven Lektion

Zusammenfassung

Verwenden Sie Context für stabile, querschnittliche Werte wie Authentifizierung, Theme und Locale. Bevorzugen Sie Props für 1–3 Ebenen der Weitergabe. Nutzen Sie Composition, um Prop-Drilling zu vermeiden. Verwenden Sie React Query für Server-State und Zustand/Redux für komplexen gemeinsamen State.

Kurs abgeschlossen

Herzlichen Glückwunsch! Sie haben **React Context Patterns & Performance** abgeschlossen. Sie wissen jetzt, wie Sie Contexts aufteilen, Werte memoizen und Selector verwenden – und ebenso wichtig: wann Sie Context überhaupt nicht verwenden sollten.

Kostenlos starten

Lerne React mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 88
Lektionen: 324

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Wann Sie Context nicht verwenden sollten“ kostenlos?

Ja — der vollständige Text von „Wann Sie Context nicht verwenden sollten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Wann Sie Context nicht verwenden sollten“?

Erkennen Sie Fälle, in denen Prop-Weitergabe, Composition oder ein State-Manager besser geeignet sind. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Wann Sie Context nicht verwenden sollten“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Contexts aufteilen, um erneute Renderings zu begrenzen
Context-Werte mit useMemo memoizen
Context-Selector-Pattern
Wann Sie Context nicht verwenden sollten

← Zurück zu React Academy