Wie speichert man einen Wert in einer Komponente, ohne einen Re-Render auszulösen?

In React kann man zum Speichern eines Wertes in einer Komponente, ohne eine erneute Renderung auszulösen, den Hook useRef verwenden. Der in useRef gespeicherte Wert bleibt zwischen den Renderings erhalten, aber eine Änderung dieses Wertes löst kein erneutes Rendern der Komponente aus.

Beispiel:

import React, { useRef } from 'react';

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

  const erhöhen = () => {
    countRef.current += 1;
    console.log('Aktueller Wert:', countRef.current);
    // Die Komponente wird nicht neu gerendert
  };

  return <button onClick={erhöhen}>Erhöhen</button>;
}

Daher eignet sich useRef zum Speichern beliebiger Daten, die die UI nicht beeinflussen und bei Änderungen kein Neurendering erfordern.