Cleaning Up Observers in Svelte and Solid Lifecycles

Tie every observer's teardown to the same lifecycle scope that created it — an action's destroy or an $effect's returned function in Svelte, onCleanup in the creating scope in Solid — and never create observers at a component's top level, where no teardown hook is guaranteed to match.

Problem / Scenario Context

A team maintains two apps: a SvelteKit marketing site and a SolidStart dashboard. Both slowly leak memory during long sessions. Heap snapshots (see finding observer leaks with heap snapshot diffing) show ResizeObserver instances accumulating on the dashboard and detached <section> elements accumulating on the marketing site. The code looks tidy — every observer has a cleanup somewhere — but some cleanups are registered in the wrong place and never run, or run for the wrong element.

The Svelte Actions & Solid Primitives topic introduces both frameworks' binding models; this page maps their teardown semantics precisely.

Mechanics Explanation

Svelte has three teardown points:

• Action destroy() — runs when the element the action is on is removed from the DOM, for any reason: component unmount, {#if} becoming false, an {#each} item removed. After an outro transition, if there is one.
• onDestroy() — runs when the component is destroyed. It does not run when an element inside the component is removed by a conditional block.
• Svelte 5 $effect return value — runs before the effect re-runs (because a dependency changed) and when the component is destroyed.

Solid has one mechanism with scope-dependent meaning:

• onCleanup(fn) registers fn with the current owner. In a component body, that is the component; in a createEffect or createMemo, it is that computation (so it runs before each re-run too); in a <For> row or <Show> branch, it is that row or branch; in a ref callback, it is the owner that created the element.

Leaks happen when teardown is registered with a longer-lived scope than the observed element (the element goes, the observation stays), or when the observer is created outside any scope, such as at module level or in an event handler, where onCleanup has no owner and does nothing — Solid warns about this in development.

Comparison Table: Correct Hook per Observer Placement

Minimal Reproducible Example

<!-- Svelte: leaks sections removed by the {#if} -->
<script>
  import { onMount, onDestroy } from 'svelte';
  let showDetails = $state(false);
  let details;
  const io = new IntersectionObserver(() => {});
  $effect(() => { if (showDetails && details) io.observe(details); });
  onDestroy(() => io.disconnect());       // runs only when the whole component goes
</script>
{#if showDetails}<section bind:this={details}>…</section>{/if}

// Solid: onCleanup after an await has no owner, so it never runs.
function Chart() {
  let el!: HTMLDivElement;
  onMount(async () => {
    await loadChartLib();
    const ro = new ResizeObserver(() => redraw());
    ro.observe(el);
    onCleanup(() => ro.disconnect());     // too late: owner context lost after await
  });
  return <div ref={el} />;
}

declare function loadChartLib(): Promise<void>;
declare function redraw(): void;

Toggling showDetails repeatedly leaves each old <section> observed and retained. Mounting and unmounting Chart leaves every ResizeObserver alive.

Production-Safe Solution

Svelte: attach to the element, not the component.

<script lang="ts">
  import { inView } from '$lib/actions/in-view';
  let showDetails = $state(false);
</script>

{#if showDetails}
  <!-- destroy() runs when this section is removed, not just when the component unmounts -->
  <section use:inView={ { onchange: (v) => console.log('details visible', v) } }>…</section>
{/if}

Solid: register cleanup before any await, or capture the owner.

import { getOwner, runWithOwner, onCleanup, onMount } from 'solid-js';

function Chart() {
  let el!: HTMLDivElement;
  let ro: ResizeObserver | undefined;
  onCleanup(() => ro?.disconnect());            // registered synchronously, in the component scope

  onMount(async () => {
    await loadChartLib();
    if (!el.isConnected) return;                // unmounted while loading
    ro = new ResizeObserver(() => redraw());
    ro.observe(el);
  });
  return <div ref={el} />;
}

// Alternative when cleanup must be registered after async work:
function withOwner<T>(fn: () => T): () => T {
  const owner = getOwner();
  return () => runWithOwner(owner, fn)!;
}

The Svelte fix moves the observation onto the element's own lifecycle. The Solid fix registers the cleanup synchronously, before the await, so it always has an owner; the observer variable is filled in later, and the cleanup handles either state. The isConnected check covers the case where the component unmounted during the load.

Shared Observers and Reference Counting

Module-level shared observers — the pool pattern used throughout this section — outlive every component by design. They still need teardown at the element level: every registration must be paired with an unobserve, and the observer itself should disconnect when its last element leaves, so an app that navigates away from all observed content does not keep an idle observer and its callback alive.

let count = 0;
let shared: IntersectionObserver | null = null;

export function register(el: Element): () => void {
  shared ??= new IntersectionObserver(onEntries);
  shared.observe(el);
  count++;
  let released = false;
  return () => {
    if (released) return;                 // idempotent: safe if called twice
    released = true;
    shared?.unobserve(el);
    if (--count === 0) { shared?.disconnect(); shared = null; }
  };
}

declare function onEntries(entries: IntersectionObserverEntry[]): void;

Idempotent release functions matter in both frameworks: a Svelte action with a once option may release itself early and then have destroy call it again; a Solid row may be disposed after an explicit release. Neither double call should decrement the count twice.

Verification Steps

• Toggle conditional content 20 times and compare heap snapshots: detached elements should not grow.
• Mount and unmount components that create observers after async work and confirm instance counts stay flat.
• Watch Solid's development warnings for "cleanups created outside a createRoot or render will never be run".
• Call release functions twice in a test and confirm the shared count does not go negative.
• Navigate across routes in SvelteKit or SolidStart and confirm shared observers disconnect when no page uses them.

Common Mistakes to Avoid

• Using component-level teardown for element-level observations. Conditional and list content outlives or predeceases its component.
• Registering onCleanup after await. The owner context is gone.
• Non-idempotent release functions. Double calls corrupt reference counts.
• Treating shared observers as permanent. Unobserve per element and disconnect at zero.

FAQ

Related

• Writing a Svelte IntersectionObserver Action — the action these rules apply to
• SolidJS createIntersectionObserver Primitive — owners in practice
• Preventing Memory Leaks in Long-Running Observers — framework-agnostic leak patterns

↑ Back to Svelte Actions & Solid Primitives for Observers