javascript / expert
Snippet
Deklarative Viewport-Beobachtung mit $effect
Die Integration imperativer Browser-APIs wie IntersectionObserver erfordert ein sorgfältiges Lebenszyklus-Management. Die $effect-Rune von Svelte 5 bietet eine saubere Möglichkeit, Observer einzurichten und abzubauen. Die zurückgegebene Cleanup-Funktion verhindert Speicherlecks.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
let isVisible = $state(false);let element = $state<HTMLElement>();$effect(() => {if (!element) return;const observer = new IntersectionObserver(([entry]) => {isVisible = entry.isIntersecting;});observer.observe(element);return () => observer.disconnect();});
svelte
Erklärung
1
$effect(() => { ... });
Führt Code nach dem Mounten der Komponente und bei Updates der Abhängigkeiten aus.
2
isVisible = entry.isIntersecting;
Überträgt imperative Callback-Daten in den reaktiven Zustand.
3
return () => observer.disconnect();
Cleanup-Funktion, die vor einem erneuten Durchlauf oder beim Unmount ausgeführt wird.