Defensive Memory Management for Global Event Listeners

Snippet

Defensive Memory Management for Global Event Listeners

In Svelte 5, $effect is the primary tool for side effects. When binding to global objects like 'window' or 'document', returning a cleanup function is mandatory to prevent memory leaks during component unmounting or reactive re-executions.

snippet.js
javascript
$effect(() => {
  const handleResize = () => {
    console.log('Window resized');
  };
  window.addEventListener('resize', handleResize);
  return () => {
    window.removeEventListener('resize', handleResize);
  };
});

svelte

Breakdown

$effect(() => {

Registers a reactive side effect that runs after DOM updates.

window.addEventListener('resize', handleResize);

Attaches a listener to the global window object.

return () => { ... };

Crucial cleanup pattern: Svelte executes this function before the effect re-runs or when the component is destroyed.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Defensive Memory Management for Global Event Listeners

Related