Referenzen vs. State
In React erfüllen sowohl Referenzen (Refs) als auch State zentrale Aufgaben, unterscheiden sich jedoch grundlegend in ihrer Funktionsweise und ihrem Einsatzzweck. Während State hauptsächlich dazu dient, UI-Daten und Komponentenstatus reaktiv zu verwalten und bei Änderungen ein erneutes Rendern auszulösen, ermöglichen Refs den direkten Zugriff auf DOM-Elemente oder Komponenteninstanzen, ohne dabei eine Reaktion auf Änderungen zu triggern. Dieses differenzierte Verhalten macht Refs ideal für imperativen Zugriff, etwa zur Fokussteuerung oder Animation, während State für die deklarative Darstellung und Steuerung von UI-Zuständen zuständig ist. Das Verständnis der Unterschiede und Einsatzszenarien ist essenziell, um React-Anwendungen effizient und performant zu gestalten.
Inhaltsverzeichnis
Referenzen auf Elemente können bequem verwendet werden, um auf die DOM-Elemente zuzugreifen und bestimmte Aktionen in diesem Zusammenhang auszuführen. Allerdings sollte man genau prüfen, welche Aktionen dabei ausgeführt (sollen).
Referenzen über useRef() Hook können nützlich sein, um direkt auf ein Input-Element zuzugreifen, um bspw. den Wert auszulesen. Wenn es lediglich um diese einfache Aufgabe geht, können Referenzen tatsächlich die Zustandsverwaltung umgehen.
Sobald man allerdings weiterreichende Aktionen durchführen muss, die auch die UI beeinflussen oder aktualisieren, oder sogar andere Components über eine Änderung benachrichtigen müssen, können Referenzen nicht mehr weiter helfen und State kommt wieder zum Einsatz.
Ich möchte an dieser Stelle das Beispiel aus der Einführung aufgreifen und die Funktionalität ergänzen, bei der nach dem Absenden des Formulars das Input-Element zurückgesetzt wird. Obwohl möglich, sollte man nicht direkt die DOM-Elemente manipulieren.
import { useState } from 'react';
const FormWithRef = () => {
const [fieldUsername, setFieldUsername] = useState('');
const handleUpdateFieldUsername = (event) => {
setFieldUsername(current => event.target.value);
};
const handleSubmitForm = (event) => {
event.preventDefault();
console.log(fieldUsername);
setFieldUsername(current => '');
};
return (
<form onSubmit={handleSubmitForm}>
<label htmlFor="fieldUsername">Benutzername</label>
<input
type="text"
name="fieldUsername"
id="fieldUsername"
value={fieldUsername}
onChange={handleUpdateFieldUsername}
/>
<button>Submit</button>
</form>
);
};
export default FormWithRef;In diesem Beispiel haben wir wieder State statt Referenzen im Einsatz. Dadurch werden die Felder, in dem Fall der Wert, über React manipuliert. Entsprechend kriegt auch die UI alle Update korrekt.
