Declarative Viewport Observation with $effect

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

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

$effect(() => { ... });

Runs code after the component is mounted and dependencies update.

isVisible = entry.isIntersecting;

Bridges imperative callback data into reactive state.

return () => observer.disconnect();

Cleanup function executed before re-running or on unmount.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Declarative Viewport Observation with $effect

Related