React Academy · Les

Best practices voor keys en refs

Gebruik stabiele keys, vermijd valkuilen van index-as-key en werk met callback refs.

Les 3 van 413 stappen

Best practices voor keys en refs 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 leer je lijstkeys correct gebruiken, waarom het gebruik van een array-index als key bugs veroorzaakt en hoe je met callbackrefs en doorgestuurde refs werkt.

Waarom keys belangrijk zijn

React gebruikt `key`-props om bij volgende renders bij te houden welke items in een lijst zijn gewijzigd, toegevoegd of verwijderd. Met een correcte key kan React bestaande DOM-nodes hergebruiken; een verkeerde key veroorzaakt onnodige unmounts en remounts.

Stabiele unieke keys

De beste key is een stabiele, unieke ID uit je gegevens — bijvoorbeeld een ID van een databaseregel of een UUID. Deze key hoeft alleen uniek te zijn onder directe broers en zussen, niet wereldwijd op de hele pagina.

users.map(user => (
  <UserCard key={user.id} user={user} />
))

Waarom een index als key problematisch is

Een array-index als key werkt prima voor statische lijsten, maar veroorzaakt bugs in gesorteerde of gefilterde lijsten. Wanneer items van volgorde veranderen, koppelt React componenten op basis van hun index en hergebruikt het de verkeerde DOM-nodes. Daardoor raken invoerwaarden en animatiestate beschadigd.

// Risky when list can reorder or filter
items.map((item, i) => <Row key={i} {...item} />)

Wanneer een index als key acceptabel is

Een index als key is alleen acceptabel wanneer: (1) de lijst nooit opnieuw wordt gesorteerd of gefilterd, (2) items geen stabiele ID hebben en (3) items geen lokale state hebben (bijvoorbeeld invoerwaarden). Statische weergavelijsten zijn prima.

Stabiele ID's genereren

Als je gegevens geen ID hebben, genereer je er een wanneer je het item maakt (niet tijdens het renderen). Je kunt `crypto.randomUUID()` of de bibliotheek `nanoid` gebruiken.

const newItem = { id: crypto.randomUUID(), text: 'Buy milk' };

Basisprincipes van useRef

`useRef` retourneert een wijzigbaar object waarvan de waarde van `.current` tussen renders behouden blijft zonder nieuwe renders te veroorzaken. Je gebruikt het om DOM-verwijzingen en wijzigbare waarden, zoals timer-ID's, te bewaren.

const inputRef = useRef(null);
<input ref={inputRef} />
// Access DOM node: inputRef.current.focus();

Callbackrefs

In plaats van een ref-object door te geven, kun je een **callbackref** doorgeven — een functie die React met de DOM-node aanroept wanneer die wordt gemount en met `null` wanneer die wordt ge-unmount. Zo kun je logica precies instellen wanneer de node beschikbaar komt.

function Input() {
  return (
    <input
      ref={node => {
        if (node) node.focus();
      }}
    />
  );
}

forwardRef voor componentrefs

Functiecomponenten accepteren `ref` niet als een gewone prop. Wikkel de component in `React.forwardRef` om bovenliggende componenten een ref aan een interne DOM-node te laten koppelen.

const FancyInput = React.forwardRef((props, ref) => (
  <input ref={ref} className="fancy" {...props} />
));

// Parent
const inputRef = useRef(null);
<FancyInput ref={inputRef} />

useImperativeHandle

Wanneer een bovenliggende component een ref naar een onderliggende component bijhoudt, kun je met `useImperativeHandle` precies bepalen wat die onderliggende component beschikbaar stelt. Zo blijven de interne DOM-elementen van de onderliggende component privé en bied je toch een duidelijke imperatieve API.

const Child = forwardRef((_, ref) => {
  const innerRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => innerRef.current.focus(),
  }));
  return <input ref={innerRef} />;
});

Korte controle

Waarom moet je het gebruik van de array-index als key vermijden in een lijst waarvan de volgorde kan veranderen?

Beantwoord dit in de interactieve les

Samenvatting

Gebruik stabiele gegevens-ID's als keys, vermijd index-keys in dynamische lijsten, gebruik useRef voor DOM-toegang en wijzigbare waarden, gebruik callbackrefs voor logica bij mounten en unmounten en gebruik forwardRef om refs vanuit onderliggende componenten beschikbaar te maken.

Hierna

Volgende les: **Mappenstructuur en naamgevingsconventies** — je leert een React-project organiseren met mappen per functie en consistente bestandsnamen.

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 “Best practices voor keys en refs” gratis?

Ja — de volledige tekst van “Best practices voor keys en refs” 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 “Best practices voor keys en refs”?

Gebruik stabiele keys, vermijd valkuilen van index-as-key en werk met callback refs. 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 “Best practices voor keys en refs”?

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

Wat StrictMode doet
Pure componenten en side effects in render vermijden
Best practices voor keys en refs
Mappenstructuur en naamgevingsconventies

← Terug naar React Academy