Context gebruiken met useContext
Lees contextwaarden in elke geneste component met de useContext-hook, zodat u props niet via tussenliggende componenten hoeft door te geven.
Context gebruiken met useContext is een gratis React Native Academy-les op CoddyKit. Dit is les 2 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 React Native Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Native Academy bevat in totaal 4 lessen.
Context lezen met useContext
Met de hook useContext(ContextObject) kan elk functiecomponent zich abonneren op een context en de huidige waarde ervan lezen. Deze hook vervangt het oudere patroon van een Consumer-renderprop door een eenvoudige hookaanroep. Het component wordt automatisch opnieuw gerenderd wanneer de contextwaarde verandert.
import { useContext } from 'react';
import { ThemeContext } from '../context/ThemeContext';
function Header() {
const { theme } = useContext(ThemeContext);
return (
<View style={{ backgroundColor: theme === 'dark' ? '#1a1a2e' : '#fff' }}>
<Text>My App</Text>
</View>
);
}Geen prop drilling nodig
Het belangrijkste voordeel van useContext is dat het consumerende component geen props van zijn parent hoeft te ontvangen. Het Header-component uit het vorige voorbeeld kan zich overal in de boomstructuur bevinden — drie niveaus diep, in een modal of in een volledig andere tak — en leest nog steeds dezelfde themawaarde rechtstreeks uit de context.
// Without context: theme prop drills through App→Screen→Section→Card→Header
// With context: Header reads theme directly from context
function DeepComponent() {
const { user } = useContext(AuthContext); // no props needed
return <Text>Welcome, {user.name}</Text>;
}Acties vanuit context aanroepen
Context kan niet alleen gegevens beschikbaar stellen, maar ook functies die de gegevens bijwerken. Roep deze functies rechtstreeks aan vanuit het consumerende component, zonder te weten waar de status zich bevindt. De Provider handelt de statusupdate af en alle consumers die van de waarde afhankelijk zijn, worden automatisch opnieuw gerenderd.
function LogoutButton() {
const { logout } = useContext(AuthContext);
return (
<Button title='Sign Out' onPress={logout} />
);
}Meerdere contexten in één component gebruiken
Een component kan meerdere contexten gebruiken door useContext meerdere keren met verschillende contextobjecten aan te roepen. Elke aanroep is onafhankelijk — een wijziging in ThemeContext veroorzaakt alleen opnieuw renderen in consumers van ThemeContext, niet in consumers van AuthContext (tenzij die ook van ThemeContext afhankelijk zijn).
function ProfileScreen() {
const { user } = useContext(AuthContext);
const { theme } = useContext(ThemeContext);
return (
<View style={styles[theme]}>
<Text style={styles[theme + 'Text']}>
{user.name}
</Text>
</View>
);
}De contextwaarde is de meest recente render
useContext geeft altijd de meest recente waarde van de dichtstbijzijnde overeenkomende Provider. Wanneer de Provider opnieuw rendert met een nieuwe waarde, verspreidt React de update onmiddellijk naar alle consumers, zelfs als tussenliggende componenten tussen de Provider en consumer niet opnieuw zijn gerenderd. Dit is een van de belangrijkste voordelen ten opzichte van het doorgeven van props via tussenliggende componenten die mogelijk niet renderen.
Een aangepaste useAuth-hook maken
In plaats van in elk component useContext(AuthContext) te importeren en aan te roepen, kun je dit in een aangepaste useAuth-hook verpakken. Zo verberg je het importeren van het contextobject, wordt de aanroepende code leesbaarder en kun je foutcontroles of afgeleide waarden op één plek toevoegen.
// context/AuthContext.js
export function useAuth() {
const ctx = useContext(AuthContext);
if (!ctx) throw new Error('useAuth must be inside AuthProvider');
return ctx;
}
// In any component
function NavBar() {
const { user, logout } = useAuth(); // clean and simple
return <Text>{user.email}</Text>;
}Routes beveiligen met context
Een veelgebruikt patroon is het lezen van de authenticatiestatus uit de context en afhankelijk daarvan de geauthenticeerde app-navigatie of het inlogscherm weergeven. De hoofdnavigator leest user uit AuthContext — wanneer user null is, worden de authenticatieschermen weergegeven, en wanneer er een waarde is ingesteld, worden de hoofdschermen van de app weergegeven.
function RootNavigator() {
const { user } = useAuth();
return (
<NavigationContainer>
{user ? <AppStack /> : <AuthStack />}
</NavigationContainer>
);
}Voorwaardelijk renderen op basis van context
Componenten kunnen contextwaarden gebruiken om te bepalen wat ze renderen. Een component voor een premiumfunctie controleert de abonnementslaag van de gebruiker uit de context en rendert de volledige functie of een oproep tot actie voor een betaalmuur. Deze logica staat in het consumerende component, waardoor de Provider algemeen en herbruikbaar blijft.
function PremiumFeature({ children }) {
const { user } = useAuth();
const isPro = user?.subscription === 'pro';
if (!isPro) {
return <UpgradePrompt />;
}
return children;
}Context in lijstitems
Context werkt ook binnen renderItem-componenten van FlatList. Elk lijstitem kan de context lezen zonder props. Houd er rekening mee dat elk zichtbaar lijstitem opnieuw wordt gerenderd als de contextwaarde verandert — gebruik React.memo en zorg dat de contextwaarde stabiel is (gememoized) om de impact te beperken.
const CartItem = React.memo(({ item }) => {
const { addToCart } = useContext(CartContext);
return (
<View style={styles.row}>
<Text>{item.name}</Text>
<Button title='Add' onPress={() => addToCart(item)} />
</View>
);
});Context versus props: wanneer gebruik je welke?
Gebruik props voor gegevens die van nature bij de parent horen en rechtstreeks relevant zijn voor de weergave van het onderliggende component. Gebruik context voor globale of dwarsliggende onderwerpen: authenticatie, thema, taal en winkelwagenstatus. Als je context te veel gebruikt voor lokale gegevens, worden componenten moeilijker te begrijpen en afzonderlijk te hergebruiken, omdat hun afhankelijkheden impliciet zijn in plaats van expliciet.
De retourwaarde van useContext
useContext retourneert precies de waarde die is doorgegeven aan de prop value van de dichtstbijzijnde Provider. Als er boven het component geen Provider wordt gevonden, retourneert de hook de standaardwaarde die aan createContext() is meegegeven. Haal het geretourneerde object rechtstreeks op de plaats van de aanroep uit elkaar voor schonere, beter leesbare code.
// Full value object
const themeContext = useContext(ThemeContext);
themeContext.theme; // 'light' or 'dark'
// Destructured (preferred)
const { theme, toggleTheme } = useContext(ThemeContext);
// From custom hook
const { user, login, logout } = useAuth();Korte controle
Test je begrip van het gebruiken van context met useContext uit deze les.
Samenvatting van de les
In deze les heb je geleerd dat useContext(ContextObject) de waarde van de dichtstbijzijnde Provider leest zonder prop drilling, dat een component meerdere contexten kan gebruiken door useContext meerdere keren aan te roepen en dat het verpakken van useContext in een aangepaste hook een overzichtelijke API met foutcontrole oplevert. Hierna bouwen we een themacontext met een schakelaar voor de donkere modus.
Leer JavaScript 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
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Context gebruiken met useContext” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “Context gebruiken met useContext”, 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 React Native Academy bevat in totaal 4 lessen.
Wat leer ik in “Context gebruiken met useContext”?
Lees contextwaarden in elke geneste component met de useContext-hook, zodat u props niet via tussenliggende componenten hoeft door te geven. Je oefent met React Native Academy 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 React Native Academy te beginnen?
Ervaring vooraf is niet nodig. React Native Academy 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 2 van 4.
Hoe lang duurt de les “Context gebruiken met useContext”?
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 React Native Academy?
Ja. Elke les over React Native Academy 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.
Alle lessen in deze cursus
- Een context maken en beschikbaar stellen
- Context gebruiken met useContext
- Een ThemeContext met een darkmode-schakelaar
- Prestatieproblemen met context voorkomen