javascript / expert
Snippet
Stabile Objektreferenzen für Hook-Abhängigkeiten
Der Standard-useEffect verwendet referenzielle Gleichheit für Abhängigkeiten. Wenn Sie bei jedem Rendering ein neues Objekt-Literal übergeben, wird der Effekt jedes Mal ausgeführt. Durch einen benutzerdefinierten Vergleich (z. B. Deep Equality) mittels Refs stellen Sie sicher, dass Effekte nur bei echten Datenänderungen ausgelöst werden.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
function useDeepEffect(fn, deps) {const isFirst = React.useRef(true);const prevDeps = React.useRef(deps);React.useEffect(() => {const isSame = deps.every((dep, i) => JSON.stringify(dep) === JSON.stringify(prevDeps.current[i]));if (isFirst.current || !isSame) {fn();}isFirst.current = false;prevDeps.current = deps;}, [deps]);}
react
Erklärung
1
const prevDeps = React.useRef(deps);
Behält die Abhängigkeitswerte über Renderings hinweg bei, ohne selbst ein Re-Rendering auszulösen.
2
JSON.stringify(dep) === JSON.stringify(prevDeps.current[i])
Ein einfacher (wenn auch rechenintensiver) Weg, um auf Wertgleichheit statt auf Referenzgleichheit zu prüfen.