Wat doet React.memo en wanneer is het nuttig om het te gebruiken?

Question

Accepted Answer

`React.memo` verpakt een component zodat het **re-renderen overslaat wanneer de props ondiep gelijk zijn aan de vorige render**. Standaard wordt een child opnieuw gerenderd wanneer de parent opnieuw rendert; `memo` onderbreekt dit wanneer de props niet echt zijn veranderd. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

onSelect(item.id)}>{item.name}

; }); ``` ## Het addertje: het vereist stabiele props `memo` voert een **ondiepe** vergelijking uit. Als de parent elk render een nieuw object/array/functie doorgeeft, mislukt de vergelijking altijd en doet `memo` niets: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` Los op door de functie met `useCallback` te stabiliseren: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Waarom het belangrijk is - Een component rendert **vaak** met **dezelfde** props en de rendering ervan is niet-triviaal (grote lijsten, dure subtrees). ## Wanneer niet - De meeste components zijn goedkoop; de vergelijking zelf heeft kosten, en alles inpakken voegt alleen maar complexiteit toe zonder voordeel. **Profile eerst** met de React DevTools Profiler, memoize daarna de bewezen hotspots — memoize niet blindelings.