Prestatieproblemen met context voorkomen
Identificeer onnodige re-renders door wijzigingen in contextwaarden, splits de context op in meerdere providers en memoize contextwaarden om de prestaties te optimaliseren.
Prestatieproblemen met context voorkomen is een gratis React Native Academy-les op CoddyKit. Dit is les 4 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.
Het probleem van opnieuw renderen door context
Wanneer de contextprovider opnieuw wordt gerenderd met een nieuwe value, wordt elk onderdeel dat useContext voor die context aanroept opnieuw gerenderd, ongeacht of het specifieke deel van de waarde dat het gebruikt is veranderd. In grote apps met veel gebruikers kan dit leiden tot aanzienlijke prestatieproblemen.
Onnodig opnieuw renderen door context opsporen
Gebruik de React DevTools Profiler om onderdelen te identificeren die te vaak opnieuw worden gerenderd. Leg een interactie vast die slechts één deel van de gebruikersinterface zou moeten beïnvloeden en bekijk vervolgens welke onderdelen in de vlamgrafiek zijn gemarkeerd. Als onderdelen die slechts één stukje context lezen opnieuw worden gerenderd wanneer een niet-gerelateerd stuk verandert, heb je een prestatieprobleem.
Het anti-patroon van een inline object
De meest voorkomende oorzaak van onnodig opnieuw renderen door context is het inline aanmaken van het waardeobject in JSX. Hierdoor ontstaat bij elke render van de provider een nieuwe objectreferentie, die React als een gewijzigde waarde beschouwt — zelfs wanneer de inhoud identiek is — waardoor alle gebruikers opnieuw worden gerenderd.
// Bad: new object on every render
<MyContext.Provider value={{ user, logout }}>
// Good: stable reference with useMemo
const value = useMemo(() => ({ user, logout }), [user, logout]);
<MyContext.Provider value={value}>Contextwaarden onthouden met useMemo
Omhul het contextwaardeobject in de provider met useMemo. React maakt alleen een nieuw object en brengt gebruikers dus alleen op de hoogte wanneer een van de opgegeven afhankelijkheden verandert. Dit is de eenvoudigste en meest doeltreffende oplossing voor prestatieproblemen met context.
function CartProvider({ children }) {
const [items, setItems] = useState([]);
const addItem = useCallback((item) => {
setItems((prev) => [...prev, item]);
}, []);
const value = useMemo(() => ({
items,
addItem,
total: items.reduce((sum, i) => sum + i.price, 0),
}), [items, addItem]);
return <CartContext.Provider value={value}>{children}</CartContext.Provider>;
}Contexten opsplitsen voor onafhankelijke verantwoordelijkheden
Als je context zowel vaak veranderende waarden bevat (bijvoorbeeld het aantal artikelen in de winkelwagen) als zelden veranderende waarden (bijvoorbeeld het gebruikersprofiel), moeten gebruikers die alleen de stabiele gegevens nodig hebben opnieuw worden gerenderd telkens wanneer de veranderlijke gegevens veranderen. De oplossing is om de context op te splitsen in twee afzonderlijke providers — één voor elke verantwoordelijkheid.
// Instead of one big UserContext:
export const UserDataContext = createContext(null); // changes rarely
export const UserActionsContext = createContext(null); // changes rarely
export const CartItemsContext = createContext([]); // changes often
// Consumers only subscribe to what they useStatus en dispatch scheiden
Een bewezen patroon is om de context op te splitsen in een statuscontext en een dispatchcontext. Dispatchfuncties veranderen nooit (useCallback of dispatch van useReducer is stabiel), zodat onderdelen die alleen acties dispatchen nooit opnieuw worden gerenderd door statuswijzigingen. Alleen onderdelen die de status lezen, worden opnieuw gerenderd wanneer de status verandert.
export const AppStateContext = createContext(null);
export const AppDispatchContext = createContext(null);
function AppProvider({ children }) {
const [state, dispatch] = useReducer(appReducer, initialState);
return (
<AppStateContext.Provider value={state}>
<AppDispatchContext.Provider value={dispatch}>
{children}
</AppDispatchContext.Provider>
</AppStateContext.Provider>
);
}React.memo helpt gebruikers van context NIET
Een veelgemaakte fout is om gebruikers van context in React.memo te omhullen, in de veronderstelling dat dit opnieuw renderen door contextwijzigingen voorkomt. Dat doet het niet — React.memo vergelijkt alleen eigenschappen, niet de contextabonnementen. Een onderdeel dat context gebruikt, wordt altijd opnieuw gerenderd wanneer de contextwaarde verandert, ongeacht React.memo.
// React.memo does NOT prevent context-driven re-renders
const MyComponent = React.memo(() => {
const { value } = useContext(MyContext);
// Still re-renders every time MyContext changes
return <Text>{value}</Text>;
});
// Solution: Split context or memoize the value in the ProviderHet selecteerpatroon voor context
Als je gedetailleerde abonnementen nodig hebt die vergelijkbaar zijn met useSelector van Redux, kun je een eenvoudig selecteerpatroon implementeren. Een aangepaste hook accepteert een selecteerfunctie en onthoudt de geselecteerde waarde met useMemo. Alleen wanneer de geselecteerde waarde verandert, wordt er opnieuw gerenderd, niet wanneer de volledige context verandert.
function useCartTotal() {
const { items } = useContext(CartContext);
// Only recomputes when items changes
return useMemo(
() => items.reduce((sum, item) => sum + item.price, 0),
[items]
);
}
// Component only re-renders when the total number changes
function CartBadge() {
const total = useCartTotal();
return <Text>${total.toFixed(2)}</Text>;
}Providers licht houden
Het provideronderdeel zelf moet zo eenvoudig mogelijk zijn. Verplaats dure berekeningen uit de render van de provider naar useMemo of naar de reducer. Vermijd het ophalen van gegevens, het uitvoeren van zware transformaties of het inline aanmaken van grote objecten in de JSX van de provider bij elke render.
Compositie boven één enorme context
Weersta de verleiding om alle globale status van de app in één context te plaatsen. Een betere architectuur gebruikt veel kleine, gerichte contexten: AuthContext voor authenticatie, ThemeContext voor kleuren, CartContext voor de winkelwagen en NotificationContext voor meldingen. Elke context rendert alleen zijn eigen gebruikers opnieuw, waardoor het bereik van elke rerender klein en voorspelbaar blijft.
// Architecture with focused contexts
export default function App() {
return (
<AuthProvider>
<ThemeProvider>
<CartProvider>
<NotificationProvider>
<AppContent />
</NotificationProvider>
</CartProvider>
</ThemeProvider>
</AuthProvider>
);
}Wanneer je Zustand of Redux kunt overwegen
Als optimalisaties voor context te ingewikkeld worden — of als je merkt dat je een uitgebreid selectiesysteem bouwt — kun je overwegen over te stappen op Zustand of Redux Toolkit. Deze bibliotheken bieden standaard gedetailleerde abonnementen en zijn ontworpen voor statusbeheer op grote schaal. Context blijft ideaal voor eenvoudige globale waarden zoals thema, authenticatie en voorkeuren.
Korte controle
Test je begrip van het voorkomen van prestatieproblemen met context uit deze les.
Samenvatting van de les
In deze les heb je geleerd dat: inline waardeobjecten in de JSX van een provider onnodig opnieuw renderen veroorzaken — gebruik useMemo om ze stabiel te maken, je grote contexten opsplitst in kleinere, gerichte contexten om het bereik van opnieuw renderen te beperken, en je status en dispatch in twee contexten scheidt, zodat onderdelen die alleen acties uitvoeren nooit opnieuw worden gerenderd bij statuswijzigingen. Hierna leer je meer over de useEffect-hook en afhankelijkheidsmatrices voor het ophalen van gegevens.
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 “Prestatieproblemen met context voorkomen” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “Prestatieproblemen met context voorkomen”, 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 “Prestatieproblemen met context voorkomen”?
Identificeer onnodige re-renders door wijzigingen in contextwaarden, splits de context op in meerdere providers en memoize contextwaarden om de prestaties te optimaliseren. 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 4 van 4.
Hoe lang duurt de les “Prestatieproblemen met context voorkomen”?
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