Kursbuch

5.14. useRef

useRef – Referenzen auf Komponenten oder Werte

Mit dem React-Hook useRef() können Sie veränderliche Werte speichern, die beim Aktualisieren des UI nicht verloren gehen – zum Beispiel Zeitgeber (setInterval) oder Sensor-Abos.

const intervalRef = useRef(null);

Der aktuelle Wert wird über intervalRef.current angesprochen. Beispiel für das Stoppen eines Countdowns:

clearInterval(intervalRef.current);

Auch für den Zugriff auf Sensoren wie den Accelerometer wird useRef verwendet, um später z. B. den Sensor wieder zu deaktivieren:

sensorRef.current = Accelerometer.addListener(({ x, y, z }) => {
  // ...
});

sensorRef.current.remove(); // Deaktiviert den Sensor

Tipp: useRef ist ideal, wenn Sie eine Art "Behälter" für veränderliche Objekte brauchen, die nicht jedes Mal neu gerendert werden sollen – z. B. laufende Zeitgeber oder Sensor-Abos.