Waarom je de React key-prop nodig hebt
Je ziet deze foutmelding in je console: "Each child in a list should have a unique 'key' prop."
Veel ontwikkelaars negeren het. Dat is een fout. Deze waarschuwing wijst je op prestatieproblemen en mogelijke bugs.
Wat is een key-prop? Het helpt React om specifieke items in een lijst te identificeren. Het vertelt React welk item is gewijzigd, verplaatst of verwijderd. Zonder een key rendert React de volledige lijst opnieuw telkens wanneer er iets verandert. Dit vertraagt je app.
Denk aan een bibliotheek met 1000 boeken. Als je een nieuw boek in het midden toevoegt, moet je elk ander boek verplaatsen om ruimte te maken. Een key werkt als een unieke ID voor elk boek. Het stelt React in staat om de exacte plek te vinden zonder de rest te verplaatsen.
Het Reconciliation-proces React gebruikt een diffing-algoritme om de nieuwe Virtual DOM met de oude te vergelijken.
- State verandert.
- React bouwt een nieuwe boom.
- React vergelijkt bomen met behulp van keys.
- React werkt alleen de gewijzigde elementen bij.
De veelgemaakte fout: een array-index als key gebruiken. Gebruik nooit key={index} als je lijst verandert. Als je items toevoegt of verwijdert, verschuift de index van elk item. React raakt in de war en rendert items opnieuw die eigenlijk niet zijn veranderd. Dit verspilt geheugen en veroorzaakt UI-bugs.
Hoe je dit oplost:
- Gebruik een stabiele ID uit je database (zoals user.id).
- Gebruik een unieke string zoals uuid als je data geen ID heeft.
- Vermijd Math.random() voor keys. Dit creëert bij elke render een nieuwe ID, wat componenten dwingt om opnieuw te mounten en zorgt voor UI-flikkeringen.
Best practices:
- Keys moeten stabiel zijn.
- Keys moeten uniek zijn onder siblings.
- Gebruik database-ID's voor de beste prestaties.
Vergelijkingstabel voor keys: • Database ID: Aanbevolen. Stabiel en snel. • Array Index: Niet aanbevolen. Veroorzaakt bugs tijdens sorteren of filteren. • Math.random(): Vermijden. Veroorzaakt onnodige re-mounts.
Samenvatting voor je workflow: Als je de foutmelding ziet, ontbreken permanente identificatoren in je componenten. Controleer je API-respons op unieke velden zoals e-mail of ID. Los dit op om 30-40% aan onnodige re-renders te besparen.