React Academy · Les

Het contextselectiepatroon

Implementeer een eenvoudige selector-hook die alleen opnieuw rendert wanneer een deel van de context verandert.

Les 3 van 413 stappen

Het contextselectiepatroon is een gratis React Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Academy bevat in totaal 4 lessen.

Welkom

In deze les implementeer je een contextselectorhook die een component op slechts een deel van de contextstatus abonneert, zodat her-renderingen door wijzigingen in andere delen worden voorkomen.

Het selectorprobleem

useContext zorgt voor een her-rendering wanneer ELK onderdeel van de context verandert. Als een component alleen de naam van de gebruiker nodig heeft, maar de context ook een lijst met meldingen bevat, wordt het naamcomponent onnodig opnieuw gerenderd wanneer er een melding wordt toegevoegd.

Wat is een selector?

Een selector is een functie die een specifiek stukje status uit een groter statusobject haalt: `state => state.user.name`. Een selectorhook abonneert zich op de context, maar activeert alleen een her-rendering wanneer de geselecteerde waarde verandert.

Eenvoudige selectorhook

Bouw een useSelector-hook die de context leest en het resultaat ervan in useMemo wikkelt. Het component wordt alleen opnieuw gerenderd wanneer de geselecteerde waarde verandert.

function useAppSelector(selector) {
  const state = useContext(AppCtx);
  return useMemo(() => selector(state), [state, selector]);
}

// Consumer only re-renders when user.name changes
const name = useAppSelector(s => s.user.name);

Controle op oppervlakkige gelijkheid

Ook met useMemo en een selector vindt er een her-rendering plaats als de selector bij elke aanroep een nieuwe object- of arrayreferentie teruggeeft, bijvoorbeeld `s => s.items.filter(...)`. Gebruik een vergelijking op oppervlakkige gelijkheid om her-renderingen over te slaan wanneer de inhoud hetzelfde is.

import { useRef } from 'react';

function useSelector(selector) {
  const state = useContext(AppCtx);
  const selected = selector(state);
  const ref = useRef(selected);
  if (!shallowEqual(ref.current, selected)) {
    ref.current = selected;
  }
  return ref.current;
}

De use-context-selector-bibliotheek

Voor gebruik in productie biedt de **use-context-selector**-bibliotheek een useContextSelector-hook met efficiënte abonnementen en gelijkheidscontroles — zonder externe statusbeheerders nodig te hebben.

import { useContextSelector } from 'use-context-selector';

const name = useContextSelector(AppCtx, s => s.user.name);

Zustand als selectorgerichte oplossing

De `useStore(selector)`-hook van Zustand heeft ingebouwde ondersteuning voor selectors en oppervlakkige gelijkheid. Daardoor past deze goed bij grote statusbomen waarin fijnmazige abonnementen belangrijk zijn.

const name = useAppStore(state => state.user.name);

Wanneer selectors overbodig zijn

Als context zelden wordt bijgewerkt en gebruikers goedkoop opnieuw kunnen worden gerenderd, voegen selectors complexiteit toe zonder meetbaar voordeel. Profileer eerst — optimaliseer altijd op basis van bewijs.

Selectorfuncties memoizen

Als je de selector rechtstreeks in de body van het component maakt, krijgt deze bij elke render een nieuwe functiereferentie, waardoor memoization mogelijk niet meer werkt. Definieer selectors buiten het component of gebruik useCallback.

// Outside component — stable reference
const selectName = s => s.user.name;

function Profile() {
  const name = useAppSelector(selectName);
  return <p>{name}</p>;
}

Afgeleide selectors

Combineer selectors door de ene vanuit de andere aan te roepen. Afgeleide selectors berekenen waarden op basis van basisselectors, zodat bedrijfslogica buiten componenten blijft.

const selectFullName = s => s.user.firstName + ' ' + s.user.lastName;

Korte controle

Waarom moeten selectorfuncties buiten de componentbody worden gedefinieerd wanneer je ze met useContextSelector of useMemo gebruikt?

Beantwoord dit in de interactieve les

Samenvatting

Selectors halen een deel van de contextstatus op en voorkomen her-renderingen wanneer andere delen veranderen. Definieer selectors buiten componenten voor stabiele referenties. Gebruik use-context-selector of Zustand voor selectorondersteuning die geschikt is voor productie.

Volgende les: **Wanneer je context niet gebruikt** — je leert herkennen wanneer het doorgeven van eigenschappen, compositie of een statusbeheerder beter past dan Context.

Gratis beginnen

Leer React 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: 88
Lessen: 324

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Het contextselectiepatroon” gratis?

Ja — de volledige tekst van “Het contextselectiepatroon” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus React Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus React Academy bevat in totaal 4 lessen.

Wat leer ik in “Het contextselectiepatroon”?

Implementeer een eenvoudige selector-hook die alleen opnieuw rendert wanneer een deel van de context verandert. Je oefent met React 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 Academy te beginnen?

Ervaring vooraf is niet nodig. React 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 3 van 4.

Hoe lang duurt de les “Het contextselectiepatroon”?

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 Academy?

Ja. Elke les over React 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

Contexten opsplitsen om re-renders te beperken
Contextwaarden memoizen met useMemo
Het contextselectiepatroon
Wanneer u Context niet moet gebruiken

← Terug naar React Academy