javascript / expert
Snippet
Fortgeschrittener Custom Store mit memoisiertem Invaliderungsschutz
Eigene Svelte-Stores können optimiert werden, indem das Standardverhalten von set/update überschrieben wird. Durch die Implementierung einer memoisierten Vergleichsfunktion verhindern wir unnötige reaktive Trigger und nachgelagerte Komponenten-Re-renders, wenn sich die Datenstruktur nicht effektiv geändert hat, was besonders bei komplexen verschachtelten Objekten entscheidend ist.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { writable } from 'svelte/store';export function createMemoStore(initialValue, compareFn = (a, b) => JSON.stringify(a) === JSON.stringify(b)) {const { subscribe, set, update } = writable(initialValue);let currentValue = initialValue;return {subscribe,set: (newValue) => {if (!compareFn(currentValue, newValue)) {currentValue = newValue;set(newValue);}},update: (fn) => {const newValue = fn(currentValue);if (!compareFn(currentValue, newValue)) {currentValue = newValue;set(newValue);}}};}
svelte
Erklärung
1
compareFn = (a, b) => ...
Ermöglicht die Definition einer eigenen Gleichheitslogik, wie z.B. Tiefenvergleich oder ID-basierte Prüfungen.
2
if (!compareFn(currentValue, newValue))
Unterbricht die Store-Benachrichtigung, wenn der neue Wert funktional identisch mit dem aktuellen ist.