React Context API
Gebruik de React Context API om de globale status te beheren en gegevens efficiënt tussen componenten te delen.
React Context API is een gratis Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Fullstackontwikkeling met Next.js 15 (App Router + Server Actions). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 4 lessen.
Waarom globale status?
In grotere applicaties moeten componenten vaak gegevens delen. Gegevens via veel lagen van componenten doorgeven heet prop drilling. Hierdoor kan je code moeilijk te lezen en te onderhouden worden.
De React Context API helpt dit op te lossen door een manier te bieden om status te delen binnen de componentenboom, zonder dat je props handmatig op elk niveau hoeft door te geven.
Maak kennis met React Context
React Context biedt een manier om gegevens door de componentenboom door te geven zonder dat je props handmatig op elk niveau hoeft door te geven.
Het is bedoeld om "globale" gegevens te delen voor een boom van React-componenten, zoals de huidige geauthenticeerde gebruiker, het thema of de voorkeurstaal.
Je Context definiëren
De eerste stap is het maken van een Context-object met React.createContext(). Je kunt een standaardwaarde opgeven. Die wordt gebruikt wanneer een component de context probeert te gebruiken zonder dat er hoger in de boom een bijbehorende Provider staat.
// Simulate React environment
const createContext = (defaultValue) => ({
_value: defaultValue, // Internal storage for the context value
Provider: function({ value, children }) {
this._value = value; // Update internal value when Provider is used
return children; // Simulate rendering children
},
get value() { return this._value; } // Getter for useContext
});
// --- Your Context ---
const ThemeContext = createContext('light');
// --- Entry point (simulated) ---
function main() {
console.log("ThemeContext default value:", ThemeContext.value);
}
main();Gegevens beschikbaar maken
Om de contextwaarde beschikbaar te maken voor componenten, wikkel je ze in met een Context Provider. De provider ontvangt een value-prop. Dit zijn de gegevens die beschikbaar zijn voor alle componenten die erin zijn genest.
Je kunt meerdere Providers voor verschillende contexten gebruiken, of zelfs geneste Providers voor dezelfde context om waarden te overschrijven.
// Simulate React environment
const createContext = (defaultValue) => ({
_value: defaultValue,
Provider: function({ value, children }) {
this._value = value;
return children;
},
get value() { return this._value; }
});
// --- Your Context ---
const UserContext = createContext(null); // Default to no user
// --- Simulated Component Tree ---
const App = () => {
const currentUser = { name: "Coddy", id: 123 };
return UserContext.Provider({
value: currentUser,
children: "User data is now provided."
});
};
// --- Entry point ---
function main() {
App(); // Call App to set the context value
console.log("Context value after App render:", UserContext.value.name);
}
main();Context gebruiken met een hook
De eenvoudigste manier om context in een functioneel component te lezen, is met de hook useContext. Deze ontvangt het Context-object zelf (bijvoorbeeld UserContext) als argument en retourneert de huidige context-value.
Wanneer de contextwaarde verandert, wordt het component dat useContext gebruikt automatisch opnieuw weergegeven.
// Simulate React environment
const createContext = (defaultValue) => ({
_value: defaultValue,
Provider: function({ value, children }) {
this._value = value;
return children;
},
get value() { return this._value; }
});
const useContext = (Context) => {
return Context.value;
};
// --- Your Context & Components ---
const LanguageContext = createContext('en');
const GreetUser = () => {
const language = useContext(LanguageContext);
return `Greeting in ${language}: Hello!`;
};
const App = () => {
return LanguageContext.Provider({
value: "es", // Provide Spanish language
children: GreetUser() // Render GreetUser inside
});
};
// --- Entry point ---
function main() {
console.log(App()); // Simulate rendering App and logging GreetUser's output
}
main();Praktisch voorbeeld: thema
Laten we met Context een eenvoudige themawisselaar bouwen. We slaan het huidige thema (bijvoorbeeld 'light' of 'dark') en een functie om het thema te wisselen op in onze context.
Eerst maken we de context en een wrappercomponent, ThemeProvider, die de themastatus beheert.
// Simulate React environment
let _themeState = 'light'; // Simulate useState for theme
let _setThemeState = (newTheme) => { _themeState = newTheme; };
const createContext = (defaultValue) => ({
_value: defaultValue,
Provider: function({ value, children }) {
this._value = value;
return children;
},
get value() { return this._value; }
});
// --- Theme Context ---
const ThemeContext = createContext({
theme: 'light',
toggleTheme: () => {}
});
// --- Theme Provider Component ---
const ThemeProvider = ({ children }) => {
const theme = _themeState; // Get current theme
const toggleTheme = () => {
_setThemeState(theme === 'light' ? 'dark' : 'light');
console.log("Theme toggled to:", _themeState); // Log for simulation
};
return ThemeContext.Provider({
value: { theme, toggleTheme },
children: children
});
};
// --- Entry point ---
function main() {
// Simulate initial render of ThemeProvider
ThemeProvider({ children: "Theme setup complete." });
console.log("Initial theme:", ThemeContext.value.theme);
}
main();Het huidige thema weergeven
Nu we onze ThemeProvider hebben, kan elk component dat erin is genest de functie theme en toggleTheme gebruiken via useContext(ThemeContext). Laten we een component maken om het huidige thema weer te geven.
// Simulate React environment (from previous scenes)
let _themeState = 'light';
let _setThemeState = (newTheme) => { _themeState = newTheme; };
const createContext = (defaultValue) => ({
_value: defaultValue,
Provider: function({ value, children }) {
this._value = value;
return children;
},
get value() { return this._value; }
});
const useContext = (Context) => {
return Context.value;
};
// --- Theme Context ---
const ThemeContext = createContext({
theme: 'light',
toggleTheme: () => {}
});
// --- Theme Provider Component ---
const ThemeProvider = ({ children }) => {
const theme = _themeState;
const toggleTheme = () => {
_setThemeState(theme === 'light' ? 'dark' : 'light');
};
return ThemeContext.Provider({
value: { theme, toggleTheme },
children: children
});
};
// --- Component to display theme ---
const ThemeDisplay = () => {
const { theme } = useContext(ThemeContext);
return `Current theme is: ${theme}`;
};
// --- App structure ---
const App = () => {
return ThemeProvider({
children: ThemeDisplay() // ThemeDisplay is nested inside Provider
});
};
// --- Entry point ---
function main() {
console.log(App()); // Simulate rendering
}
main();Interactiviteit toevoegen
Om gebruikers het thema te laten wijzigen, hebben we een manier nodig om de functie toggleTheme aan te roepen die onze ThemeProvider beschikbaar maakt. We maken een knopcomponent dat useContext gebruikt om deze functie op te halen en bij een klik uit te voeren.
// Simulate React environment (from previous scenes)
let _themeState = 'light';
let _setThemeState = (newTheme) => { _themeState = newTheme; };
const createContext = (defaultValue) => ({
_value: defaultValue,
Provider: function({ value, children }) {
this._value = value;
return children;
},
get value() { return this._value; }
});
const useContext = (Context) => {
return Context.value;
};
// --- Theme Context ---
const ThemeContext = createContext({
theme: 'light',
toggleTheme: () => {}
});
// --- Theme Provider Component ---
const ThemeProvider = ({ children }) => {
const theme = _themeState;
const toggleTheme = () => {
_setThemeState(theme === 'light' ? 'dark' : 'light');
console.log("Theme toggled to:", _themeState); // Log for simulation
};
return ThemeContext.Provider({
value: { theme, toggleTheme },
children: children
});
};
// --- Component to toggle theme ---
const ThemeTogglerButton = () => {
const { toggleTheme } = useContext(ThemeContext);
// Simulate button click
return `Click to toggle theme. (Calling toggleTheme function)`;
};
// --- App structure ---
const App = () => {
return ThemeProvider({
children: ThemeTogglerButton()
});
};
// --- Entry point ---
function main() {
console.log(App()); // Simulate rendering
// In a real app, a button click would call toggleTheme
ThemeContext.value.toggleTheme(); // Simulate a click
console.log("After simulated click, new theme:", _themeState);
}
main();Wanneer gebruik je Context?
Context is geweldig voor globale status, maar het is geen vervanging voor lokale componentstatus of prop drilling in eenvoudige situaties.
- Globale gegevens: Gebruik dit voor thema's, gebruikersauthenticatie en taalinstellingen.
- Vermijd dit voor: frequente updates (die veel nieuwe weergaven kunnen veroorzaken) of status die slechts door enkele directe kinderen nodig is.
- Afzonderlijke contexten: Maak verschillende contexten voor niet-gerelateerde onderdelen van de globale status om onnodige nieuwe weergaven te voorkomen.
Context en prestaties
Wanneer de value van een Context verandert, worden alle componenten die die context gebruiken (via useContext) opnieuw weergegeven, zelfs als ze slechts een deel van de waarde gebruiken.
Om dit te optimaliseren, kun je:
- Grote contexten opsplitsen in kleinere, gerichtere contexten.
- Complexe objecten die je als
valuedoorgeeft memoizen om onnodige nieuwe weergaven van gebruikers van de context te voorkomen.
Snelle Context-controle
Welke van de volgende uitspraken over de React Context API zijn WAAR?
Samenvatting: React Context
Je hebt geleerd hoe je de React Context API gebruikt om globale status te beheren!
createContext: Maakt een Context-object.Context.Provider: Maakt gegevens via devalue-prop beschikbaar voor kinderen.useContext: Hook om Context-gegevens in functionele componenten te gebruiken.
Context is krachtig om gegevens zoals thema's of gebruikersinformatie in je hele app te delen en prop drilling te verminderen.
Leer TypeScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 22
- Lessen
- 88
Veelgestelde vragen
Is de les “React Context API” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackontwikkeling met Next.js 15 (App Router + Server Actions), waaronder “React Context API”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 4 lessen.
Wat leer ik in “React Context API”?
Gebruik de React Context API om de globale status te beheren en gegevens efficiënt tussen componenten te delen. Je oefent met Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) te beginnen?
Ervaring vooraf is niet nodig. Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “React Context API”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)?
Ja. Elke les over Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.