Wat is React.memo? Kan je de hele applicatie in memo omhullen? Waarom is het slecht om memoization overal te gebruiken?

React.memo is een higher-order component die functionele componenten optimaliseert door her-rendering te voorkomen als de props niet zijn veranderd. Het vergelijkt de huidige en vorige props en rendert de component alleen opnieuw bij wijzigingen.

Technisch gezien kan je de hele applicatie in React.memo wikkelen, maar dat is niet wenselijk. Memoisatie is vooral nuttig voor componenten die vaak dezelfde props ontvangen en die duur zijn om te renderen.

Waarom het slecht is om memoization overal te gebruiken:

• De extra kosten voor het vergelijken van props kunnen de voordelen van het overslaan van rendering overschrijden.
• Memoization maakt de logica en debugging complexer.
• Niet alle componenten profiteren van memoization, vooral de eenvoudige en snelle.

Voorbeeld van gebruik van React.memo:

const MyComponent = React.memo(function MyComponent(props) {
  // component wordt alleen opnieuw gerenderd als props veranderen
  return <div>{props.value}</div>;
});