Kursbuch

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.

setState(prev => ...) – Vorherigen Zustand sicher aktualisieren

Wenn Sie eine State-Variable aktualisieren möchten, die auf ihrem bisherigen Zustand basiert (z. B. ein Array erweitern), ist es sinnvoll, die sogenannte funktionale Schreibweise zu verwenden:

setBewegungen(prev => [...prev, neuerWert]);

Dadurch wird sichergestellt, dass Sie immer den aktuellen Zustand erhalten – selbst wenn andere Updates gleichzeitig laufen. Diese Methode ist besonders nützlich bei Sensorwerten oder anderen schnellen Updates.

Tipp: Vermeiden Sie bei Arrays die direkte Verwendung von bewegungen in setBewegungen([...bewegungen, neuerWert]), da es sein kann, dass bewegungen nicht den aktuellsten Stand enthält.