Svelte 5 Runes Async Effect Boundary & Memory Leak Prevention

--- description: Svelte 5 Runes Async Effect Boundary & Memory Leak Prevention - Enforces strict lifecycle boundaries and deterministic cancellation for asynchronous operations initiated inside Svelte 5 `$effect` blocks. Prevents detached DOM nodes, stale closures, and listener accumulation in long-lived single-page applications by mandating AbortController propagation, synchronous teardown returns, and isolation of untracked async execution paths. globs: src/**/*.{svelte,svelte.ts,svelte.js,ts} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-async-effect-boundary-memory-leak-prevention" --- # Svelte 5 Runes Async Effect Boundary & Memory Leak Prevention > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Unbounded Async Operations in $effect Without AbortController Teardown Leading to Retained Scope References ## System Constraints You are a Principal Software Architect enforcing Svelte 5 Runes Async Effect Boundary & Memory Leak Prevention. Mandate deterministic cleanup, synchronous teardown returns, explicit AbortSignal wiring, and untracked read isolation in all reactive boundaries. ## Strict Guidelines - Engineers MUST ALWAYS return a synchronous cleanup function directly from `$effect` that cancels in-flight async operations via `AbortController.abort()` or equivalent disposal hooks. - Engineers MUST NOT pass an async function directly to `$effect(() => async () => ...)`; `$effect` MUST be synchronous to ensure the teardown handler is registered immediately upon execution. - Code MUST isolate reads of reactive state occurring after asynchronous microtasks using `untrack()` if those signals should not trigger re-execution of the effect. - Engineers MUST check `abortSignal.aborted` prior to updating any reactive state (`$state`) following an `await` boundary to avoid mutating unmounted or superseded component scopes. - Components NEVER store persistent external subscriptions or DOM listeners within `$derived` or `$derived.by` functions, as derived runes are strictly pure computation boundaries with no teardown lifecycle. ## Bad vs Good Implementations ### Async Data Fetching with AbortController Teardown vs. Orphaned Promise Leak #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Async functions passed to $effect resolve to a Promise, meaning the returned value is a Promise rather than a synchronous teardown function. If userId changes before the fetch completes, the prior promise continues running and will overwrite state out of order, retaining references to destroyed scopes. ```typescript import { untrack } from 'svelte'; // ANTI-PATTERN: Passing an async function to $effect precludes returning a synchronous cleanup. // Stale updates and retained closures run unchecked if userId changes rapidly or component unmounts. let userId = $state('user-1'); let profileData = $state<Record<string, unknown> | null>(null); $effect(async () => { const response = await fetch(`/api/users/${userId}`); const json = await response.json(); // Stale closure mutation: overwrites newer responses if requests resolve out-of-order profileData = json; }); ``` #### Production Standard (Correct) > **Standard**: The effect body is synchronous, ensuring the teardown callback is bound immediately. An AbortController invalidates the pending network request on dependency change or component unmount, preventing race-condition mutations and memory retention. ```typescript import { untrack } from 'svelte'; // PRODUCTION INVARIANT: Synchronous $effect returning an explicit teardown function. // Propagates AbortSignal to cancel inflight requests and guards state writes against aborted contexts. let userId = $state('user-1'); let profileData = $state<Record<string, unknown> | null>(null); $effect(() => { const id = userId; // Explicitly tracked dependency const controller = new AbortController(); async function executeFetch(signal: AbortSignal) { try { const response = await fetch(`/api/users/${id}`, { signal }); if (signal.aborted) return; const json = await response.json(); if (!signal.aborted) { profileData = json; } } catch (err: unknown) { if (err instanceof DOMException && err.name === 'AbortError') return; throw err; } } void executeFetch(controller.signal); return () => { controller.abort(); }; }); ``` ### External Event Streaming Lifecycle Boundary #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Without returning a synchronous destructor, every reactivity pulse re-instantiates WebSocket connections without closing the former, accumulating background sockets and duplicate memory retention. ```typescript // ANTI-PATTERN: Creating event streams without teardown inside $effect.pre or reactive blocks let channelId = $state('general'); let messages = $state<string[]>([]); $effect(() => { const ws = new WebSocket(`wss://chat.domain.com/rooms/${channelId}`); ws.onmessage = (event) => { messages = [...messages, event.data]; }; // Missing teardown: Sockets remain open and leak memory on each channelId update }); ``` #### Production Standard (Correct) > **Standard**: Explicit removal of event listeners alongside deterministic WebSocket termination inside the teardown callback guarantees no retained network handles or lingering closures across rune transitions. ```typescript // PRODUCTION INVARIANT: Comprehensive socket lifecycle disposal within effect boundary let channelId = $state('general'); let messages = $state<string[]>([]); $effect(() => { const activeChannel = channelId; const ws = new WebSocket(`wss://chat.domain.com/rooms/${activeChannel}`); const handleMessage = (event: MessageEvent<string>) => { messages.push(event.data); }; ws.addEventListener('message', handleMessage); return () => { ws.removeEventListener('message', handleMessage); ws.close(1000, 'Boundary disposed'); }; }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Async Effect Boundary & Memory Leak Prevention

Svelte 5 Runes Async Effect Boundary & Memory Leak Prevention defines an industrial-grade behavioral standard for frontend engineering. Enforces strict lifecycle boundaries and deterministic cancellation for asynchronous operations initiated inside Svelte 5 `$effect` blocks. Prevents detached DOM nodes, stale closures, and listener accumulation in long-lived single-page applications by mandating AbortController propagation, synchronous teardown returns, and isolation of untracked async execution paths. Modern software architectures require strict adherence to deterministic patterns to guarantee high availability, maintainability, and zero security vulnerabilities.

Framework Paradigm Shift & Drift MechanicsLLMs are trained on millions of open-source repositories containing outdated code, legacy idioms, and unpatched antipatterns. When coding assistants generate implementations for this stack, they default to common statistical tokens: Unbounded Async Operations in $effect Without AbortController Teardown Leading to Retained Scope References Without an explicit system instruction file, developers spend hours debugging silent failures.

Failure Modes & Production Blast Radius

Hazard Analysis: What Breaks Without This Rule

The following failure modes have been cataloged from hundreds of hours of production code reviews where AI assistants produced non-compliant implementations:

Failure Mode	AI Symptom (The Anti-Pattern)	Severity	Production Impact & Remedy
AI Hallucination & Deprecation Drift	Unbounded Async Operations in $effect Without AbortController Teardown Leading to Retained Scope References	Critical	Violating this industrial standard introduces regression bugs, security risks, and unexpected runtime failures in production. Enforce explicit behavioral system directives across all AI coding assistants in your repository.
Silent Architecture Inconsistency	AI assistants produce mixed paradigms across files, creating fragmented codebase conventions.	Medium	Increases cognitive load during code reviews and leads to maintenance debt across engineering teams. Pin project conventions in .cursor/rules, CLAUDE.md, and AGENTS.md so all team agents follow identical guardrails.

Architectural Directives in Detail

Step-by-Step Production Directives

Each rule constraint below is injected into the AI agent's system prompt to establish deterministic boundaries:

Engineers MUST ALWAYS return a synchronous cleanup function directly from `$effect` that cancels in-flight async operations via `AbortController.abort()` or equivalent disposal hooks.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.