React Hooks: Der useRef Hook

React Hooks vorgestellt

23.05.2024

reactde
Gregor Wedlich
Gregor Wedlich
Life, the Universe and Everything.
Donate with:
Lightning
Alby

Inhaltsverzeichnis

    React Hooks: Vorwort

    In dieser Reihe schauen wir uns die verschiedenen React Hooks an und wie wir sie einsetzen können. Ich verfolge dabei keinen tieferen Plan oder ein Skript, daher könnte es gut möglich sein, dass du dich jetzt fragst, wieso fängt der denn jetzt mit dem useRef-Hook an? Ehrlich gesagt, weiß ich das auch nicht. Seht es mir also nicht nach, ich schreibe hier einfach nur Dinge nieder, und vielleicht hilft es ja doch jemandem da draußen.

    Lange Rede, kurzer Sinn, lasst uns beginnen.

    Wozu dient der useRef Hook?

    Der useRef-Hook in React dient dazu, Referenzen auf DOM-Elemente oder andere mutable Objekte zu erstellen, die während des gesamten Lebenszyklus einer Komponente bestehen bleiben. Im gegensatz zu State-Änderungen, welche ein Re-Rendering auslösen, führt eine Referenz mit useRef nicht zu einem erneuten Rendern der Komponente.

    useRef wird häufig verwendet, um Werte zu speichern, die über Renderings hinweg persistent bleiben sollen, aber nicht in den Render-Prozess einbezogen werden müssen. Beispiele dafür sind das Speichern von DOM-Referenzen, Timer-IDs oder anderen mutierbaren Werten, die keinen Einfluss auf das UI haben.

    Um es hier auf den einfachsten Weg darzustellen, wofür der useRef im Kern genutzt werden kann, hier ein kleines Beispiel um den Fokus durch Klick auf einen Button auf das Input Feld zu setzen.

    1import { useRef } from 'react'; 2 3function TextInputWithFocusButton() { 4 const inputElement = useRef<HTMLInputElement>(null); 5 6 const onButtonClick = () => { 7 // `current` points on the Input-element 8 inputElement.current?.focus(); 9 }; 10 11 return ( 12 <> 13 <input ref={inputElement} type="text" /> 14 <button onClick={onButtonClick}>Focus</button> 15 </> 16 ); 17}

    Was passiert hier?

    Wir rufen useRef auf der obersten Ebene unserer Komponente auf. Wir sind hier nicht limitiert und könnten auch weitere Refs deklarieren.

    useRefgibt ein Ref-Objekt zurück, mit einer current property,welche wir auf einen Anfangswert gesetzt haben (null).

    1import { useRef } from 'react'; 2 3function TextInputWithFocusButton() { 4 const inputElement = useRef<HTMLInputElement>(null); 5 // ...

    Dann übergeben wir unser Ref-Objekt deminputElementals ref-Attribut an das JSX des Dom-Knotens.

    1 return ( 2 <> 3 <input ref={inputElement} type="text" /> 4 <button onClick={onButtonClick}>Focus</button> 5 </> 6 );

    Nachdem React den DOM-Node erstellt und auf den Bildschirm anzeigt, setzt React die current Eigenschaft ihres Ref-Objekts auf diesen DOM-Node. Damit können wir nun auf das <input> Feld zugreifen und Methoden wie focus() aufrufen.

    1 const onButtonClick = () => { 2 // `current` points on the Input-element 3 inputElement.current?.focus(); 4 };

    Weitere Anwendungsfälle für useRef

    Ein typischer Anwendungsfall wäre zum Beispiel der Einsatz bei One-Pager-Applikationen, wo wir zu bestimmten Punkten springen möchten. Mit useRef haben wir Zugriff auf Browser-Methoden wie scrollIntoView(), um zu diesen Punkten zu scrollen.

    Weiterführende Links:

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

    https://react.dev/learn/manipulating-the-dom-with-refs

    Comments: