Die Funktion createContext() ist der Ausgangspunkt für die Nutzung des React Context API. Mit ihr wird ein Context-Objekt erzeugt, das eine zentrale Schnittstelle für das Teilen von Daten zwischen Komponenten bietet, ohne dass Props manuell durch jede Komponente hindurchgereicht werden müssen. Dieses Context-Objekt umfasst einen Provider, der die Daten bereitstellt, und einen Consumer, der sie in tiefer verschachtelten Komponenten abruft. createContext() erlaubt es, einen Default-Wert festzulegen, der genutzt wird, falls kein übergeordneter Provider vorhanden ist, und bildet so die Basis für ein effizientes und flexibles globales State-Management innerhalb einer React-Anwendung.

01 · Abschnitt

Grundlegende Syntax

Die createContext() Funktion ist der Startpunkt für die Verwendung von Context. Mit ihrer Hilfe wird das Context-Objekt erstellt.

TypeScript Syntax 
const MyContext = createContext(defaultValue);

Parameter

Der Parameter defaultValue ist optional und wird verwendet, wenn eine Komponente versucht, den Context zu konsumieren, ohne dass ein passender Provider in der Hierarchie darüber existiert.

Rückgabewert

Die Funktion createContext() gibt ein Context-Objekt zurück, das diese zwei wichtigen Komponenten enthält.

  • MyContext.Provider: Eine Komponente, die den Context-Wert bereitstellt
  • MyContext.Consumer: Eine Komponente, die den Context-Wert konsumiert (veraltet zugunsten von useContext)
02 · Abschnitt

Beispiel - createContext()

In diesem Beispiel erstellen wir im ersten Part ein paar Context-Objekte mit unterschiedlichen Startwerten.

TypeScript CreateContextSimple.jsx 
// React
import { createContext } from 'react';

// Ohne einen Startwert
const SimpleBlankContext = createContext();

// Mit einem String als Startwert
const SimpleStringContext = createContext('Simple string');

// Mit einer Zahl als Startwert
const SimpleNumberContext = createContext(42);

// Mit einem Objekt als Startwert
const SimpleObjectContext = createContext({
    name: 'John',
    isLoggedIn: false
});

// Mit einem Array als Startwert
const SimpleArrayContext = createContext([
    100,
    200,
    300
]);

const CreateContextSimple = () => {
    return <></>;
};

export default CreateContextSimple;

Wie wir bereits erfahren haben, wird der Standardwert nur verwendet, wenn kein passender Provider gefunden wurde. In diesem Beispiel haben wir keinen Provider im Einsatz.

Wir können die Startwerte in der Browser-Konsole ausgeben. Dazu können wir bequem die Eigenschaft _currentValue am Context-Objekt verwenden. Als Hilfselement fügen einen einen Button hinzu, mit dem wir die initiale Startwerte ausgeben können.

TypeScript CreateContextSimple.jsx 
const CreateContextSimple = () => {
    const logInitialValues = () => {
        console.log(SimpleBlankContext._currentValue);
        console.log(SimpleStringContext._currentValue);
        console.log(SimpleNumberContext._currentValue);
        console.log(SimpleObjectContext._currentValue);
        console.log(SimpleArrayContext._currentValue);
    };

    return (
        <button onClick={logInitialValues}>Log values</button>
    );
};

export default CreateContextSimple;

Wie wir sehen, haben wir die entsprechenden Logs mit den übergebenen Werten als Ausgabe erhalten.

React Context - Beispiele mit initialen Werten als Log-Ausgabe

03 · Abschnitt

Interessantes

createContext ohne Argument: Default ist `undefined`.

createContext() ohne Parameter setzt den Default auf undefined. Wer „kein Provider in der Hierarchie" als Fehler behandeln will, setzt den Default auf null und prüft im Custom-Hook-Wrapper darauf.

Default-Wert ist nur Fallback ohne Provider — nicht als Realwert gedacht.

Wenn ein Provider existiert, gewinnt dessen value — auch wenn er null oder undefined ist. Default greift NUR außerhalb jedes Providers.

Context-Objekt in eine eigene Datei auslagern.

Konvention: pro Context eine Datei wie UserContext.js. Spart Importe in Verbraucher-Komponenten, hält die Provider-Komponente sauber und vereinfacht Tree-Shaking.

TypeScript: Generic für den Wert-Typ.

const UserContext = createContext<User | null>(null) — gibt korrekte Typen für useContext. Ohne Generic muss TS aus dem Default-Wert ableiten, was bei null als „nur null" missverstanden wird.

_currentValue ist eine INTERNE Eigenschaft — nicht in App-Code nutzen.

Im Beispiel wird _currentValue zum Debuggen genutzt. In Production-Code: kein Zugriff darauf. Die offizielle API ist useContext bzw. der Consumer. _currentValue kann ohne Vorwarnung verschwinden.

Context.Consumer ist seit Hooks Legacy.

Die Render-Props-Form <Context.Consumer>{value => ...}</Context.Consumer> war Pre-Hooks-Pattern. Heute überall useContext — kürzer, einfacher, ohne Render-Prop-Verschachtelung.

Default-Wert nur einmal evaluiert.

Der Default wird beim createContext-Aufruf evaluiert — nicht pro Render. Objekte und Arrays als Default haben dieselbe Referenz über die gesamte App-Lebensdauer.

Context ist Object — kann mit displayName für DevTools markiert werden.

UserContext.displayName = 'UserContext' macht den Context in React DevTools auffindbar. Ohne displayName erscheint er als „Context.Provider" — anonymisiert in komplexen Apps.

Weiterführende Ressourcen

Externe Quellen

/ Weiter

Zurück zu Context

Zur Übersicht