Hoe sla je een waarde op in een component zonder een her-render te triggeren?

In React, om een waarde in een component op te slaan zonder een her-render te veroorzaken, kun je de hook useRef gebruiken. De waarde die in useRef wordt opgeslagen, blijft bestaan tussen renders, maar het wijzigen van deze waarde veroorzaakt geen her-render van het component.

Voorbeeld:

import React, { useRef } from 'react';

function MijnComponent() {
  const countRef = useRef(0);

  const verhogen = () => {
    countRef.current += 1;
    console.log('Huidige waarde:', countRef.current);
    // Het component wordt niet opnieuw gerenderd
  };

  return <button onClick={verhogen}>Verhoog</button>;
}

Dus, useRef is geschikt voor het opslaan van gegevens die geen invloed hebben op de UI en die niet opnieuw gerenderd hoeven te worden bij wijziging.