javascript / intermediate
Snippet
Vorherige Werte mit Custom Hooks tracken
Da useEffect erst nach dem Abschluss des Renders ausgeführt wird, kann man eine Ref verwenden, um den 'aktuellen' Wert während des Effekts zu speichern. Dies ermöglicht den Zugriff auf den Wert des vorherigen Render-Zyklus während des nächsten.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
function usePrevious(value) {const ref = useRef();useEffect(() => {ref.current = value;}, [value]);return ref.current;}// In a component:const prevCount = usePrevious(count);
react
Erklärung
1
const ref = useRef();
Erstellt ein persistentes Objekt, das über Renders hinweg gleich bleibt.
2
ref.current = value;
Aktualisiert die Ref mit dem neuen Wert, nachdem der Render abgeschlossen ist.
3
return ref.current;
Gibt den Wert zurück, der während des *vorherigen* Effekt-Durchlaufs zugewiesen wurde.