javascript / expert
Snippet
Referenzielle Stabilität durch tiefen vergleichenden Abgleich
Reacts integrierte Hooks verwenden referenzielle Gleichheit (===). Bei Objekten, die inline erstellt werden, führt dies dazu, dass Effekte bei jedem Render neu ausgeführt werden. Dieses Pattern nutzt eine Ref, um eine 'kanonische' Version des Objekts zu speichern, die nur aktualisiert wird, wenn sich dessen Inhalt tiefgehend ändert.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
function useDeepMemo(value) {const ref = useRef();if (!isEqual(value, ref.current)) {ref.current = value;}return ref.current;}// Usageconst memoizedValue = useDeepMemo(complexObject);useEffect(() => { /* logic */ }, [memoizedValue]);
react
Erklärung
1
if (!isEqual(value, ref.current))
Führt einen tiefen Gleichheitscheck (z.B. via lodash) anstelle eines einfachen Referenzchecks durch.
2
ref.current = value;
Aktualisiert die gespeicherte Referenz nur, wenn sich die zugrunde liegenden Daten tatsächlich geändert haben.
3
return ref.current;
Gibt eine stabile Referenz zurück, die sicher in Dependency-Arrays verwendet werden kann.