javascript / expert
Snippet
Declarative Viewport Observation with $effect
Integrating imperative browser APIs like IntersectionObserver requires careful lifecycle management. Svelte 5's $effect rune provides a clean way to setup and teardown observers. The returning cleanup function prevents memory leaks by disconnecting the observer when the component or dependency changes.
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
Breakdown
1
$effect(() => { ... });
Runs code after the component is mounted and dependencies update.
2
isVisible = entry.isIntersecting;
Bridges imperative callback data into reactive state.
3
return () => observer.disconnect();
Cleanup function executed before re-running or on unmount.