Werte ohne erneutes Rendern speichern

Ziel: Speichern Sie Werte, die Re-Renders überdauern, ohne einen neuen Render auszulösen. useRef stellt Ihnen eine stabile .current-Box bereit.

• Bleibt über mehrere Renders hinweg erhalten
• Änderungen lösen keinen Re-Render aus
• Ideal für Timer und vorherige Werte

Aktualisierungen mit useState führen zu einem erneuten Rendern der Benutzeroberfläche. Aktualisierungen mit useRef tun das nicht. Verwenden Sie eine Ref für veränderliche Hilfswerte (IDs, Zähler für die Logik), nicht für Daten der Benutzeroberfläche.

Wir erhöhen einen renderCount in einem Effekt und speichern ihn in einer Ref. Er bleibt über mehrere Renders hinweg erhalten, löst aber keinen neuen Render aus.

Geeignet sind:

• Timer- und Intervall-IDs
• Caches für vorherige Werte
• Flags zwischen Renders (z. B. isMounted)

Nicht geeignet für Daten, die in der Benutzeroberfläche erscheinen müssen.

Speichern Sie die Intervall-ID in einer Ref, damit Sie den Timer ohne zusätzliche Renders starten und stoppen können.

Stolperfallen:

• Lesen Sie keine Ref, um die Benutzeroberfläche ohne State zu steuern – die Benutzeroberfläche wird nicht aktualisiert.
• Setzen Sie Refs beim Unmounten zurück, wenn sie IDs oder Ressourcen enthalten.
• Vermeiden Sie, Refs übermäßig als globale Sammelobjekte zu verwenden.

Zusammenfassung: Verwenden Sie useRef für veränderliche Werte, die über mehrere Renders hinweg bestehen bleiben – etwa IDs, vorherige Werte oder Flags –, ohne Re-Renders auszulösen. Verwenden Sie State für sichtbare Benutzeroberflächen.