Svelte 5 $effect AbortSignal Lifecycle Binding & Zombie Execution Guardrail

--- description: Svelte 5 $effect AbortSignal Lifecycle Binding & Zombie Execution Guardrail - Enforces deterministic cancellation and resource deallocation across all asynchronous or event-driven Svelte 5 $effect and $effect.pre invocations. Mandates binding an AbortController instance to the effect's synchronous teardown function to prevent memory leaks, race conditions, and zombie execution trees during rapid reactive graph invalidations. globs: src/**/*.svelte, src/**/*.svelte.ts, src/**/*.svelte.js alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-effect-abortsignal-lifetime-binding-standard" --- # Svelte 5 $effect AbortSignal Lifecycle Binding & Zombie Execution Guardrail > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Unbounded Async Operations in $effect Producing Zombie Execution and State Invalidation Races ## System Constraints You are a Principal Frontend Architect enforcing the Svelte 5 Effect AbortSignal Lifetime Binding Standard. In Svelte 5, $effect runs in response to tracked reactive state changes. When an asynchronous operation, event listener, or external stream is initiated inside $effect, you MUST guarantee that every execution path instantiates an AbortController and immediately registers controller.abort() within the returned teardown closure. Never permit dangling Promises, detached subscriptions, or state mutations occurring after the active effect lifecycle has been invalidated. ## Strict Guidelines - Engineers MUST ALWAYS instantiate a new `AbortController` at the immediate synchronous top of any `$effect` or `$effect.pre` block that initiates asynchronous work, timeouts, or DOM event bindings. - Engineers MUST ALWAYS return a synchronous cleanup function from the `$effect` closure that executes `controller.abort()` to terminate pending asynchronous operations upon reactive invalidation or component unmount. - Engineers MUST pass `controller.signal` to all underlying `fetch` requests, `addEventListener` options, and cancellable stream consumers initiated within the effect scope. - Code SHOULD catch `DOMException` with `name === 'AbortError'` cleanly in async task wrappers, explicitly suppressing noise while preventing downstream reactive assignments when `signal.aborted` is true. - Engineers MUST NOT perform reactive state writes (e.g., updating `$state` variables) across an `await` boundary without first checking `if (signal.aborted) return;` or relying on rejected aborted signals. - Components NEVER instantiate detached `setInterval` or `addEventListener` inside an `$effect` without binding their removal or abort handler directly to the effect teardown return value. ## Bad vs Good Implementations ### Async Fetch inside $effect with AbortSignal Teardown Binding #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: When `query` updates rapidly, multiple asynchronous network calls run concurrently. Without an AbortController wired to the $effect teardown, previous requests continue executing, creating race conditions where an earlier query can resolve after a later one, corrupting state and leaving zombie tasks in memory. ```typescript import { untrack } from 'svelte'; let query = $state(''); let searchResults = $state<string[]>([]); let isLoading = $state(false); $effect(() => { // Anti-pattern: Rapid changes to `query` spawn un-cancellable overlapping fetches if (!query) { searchResults = []; return; } isLoading = true; fetch(`/api/search?q=${encodeURIComponent(query)}`) .then(res => res.json()) .then(data => { // Zombie execution: Outdated responses can overwrite newer state searchResults = data.items; isLoading = false; }) .catch(err => { console.error(err); isLoading = false; }); }); ``` #### Production Standard (Correct) > **Standard**: An AbortController is instantiated synchronously at the top of the effect. Passing `signal` to `fetch` ensures network cancelation when `query` re-evaluates or the component unmounts. The returned teardown closure calls `controller.abort()`, preventing race conditions and post-teardown state mutations. ```typescript let query = $state(''); let searchResults = $state<string[]>([]); let isLoading = $state(false); $effect(() => { const controller = new AbortController(); const { signal } = controller; if (!query) { searchResults = []; isLoading = false; return () => controller.abort(); } isLoading = true; fetch(`/api/search?q=${encodeURIComponent(query)}`, { signal }) .then(res => { if (!res.ok) throw new Error(`HTTP ${res.status}`); return res.json(); }) .then(data => { if (!signal.aborted) { searchResults = data.items; isLoading = false; } }) .catch(err => { if (err.name !== 'AbortError') { console.error('Fetch failed:', err); isLoading = false; } }); return () => { controller.abort(); }; }); ``` ### DOM Event Binding with AbortSignal in $effect #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: If `targetElement` changes dynamically or the component is destroyed, event listeners accumulate on previous DOM nodes, resulting in memory leaks and event handler duplication. ```typescript let targetElement = $state<HTMLElement | null>(null); let lastPosition = $state({ x: 0, y: 0 }); $effect(() => { if (!targetElement) return; const handleMouseMove = (e: MouseEvent) => { lastPosition = { x: e.clientX, y: e.clientY }; }; // Anti-pattern: Missing teardown or manual removal that misses dynamic target changes targetElement.addEventListener('mousemove', handleMouseMove); }); ``` #### Production Standard (Correct) > **Standard**: Utilizes standard DOM `AbortSignal` listener binding (`{ signal }`). When the effect re-runs or unmounts, `controller.abort()` cleanly removes the listener without requiring an explicit reference to the handler function. ```typescript let targetElement = $state<HTMLElement | null>(null); let lastPosition = $state({ x: 0, y: 0 }); $effect(() => { if (!targetElement) return; const controller = new AbortController(); const { signal } = controller; targetElement.addEventListener( 'mousemove', (e: MouseEvent) => { lastPosition = { x: e.clientX, y: e.clientY }; }, { signal, passive: true } ); return () => { controller.abort(); }; }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 $effect AbortSignal Lifecycle Binding & Zombie Execution Guardrail

Svelte 5 $effect AbortSignal Lifecycle Binding & Zombie Execution Guardrail defines an industrial-grade behavioral standard for frontend engineering. Enforces deterministic cancellation and resource deallocation across all asynchronous or event-driven Svelte 5 $effect and $effect.pre invocations. Mandates binding an AbortController instance to the effect's synchronous teardown function to prevent memory leaks, race conditions, and zombie execution trees during rapid reactive graph invalidations. 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 Producing Zombie Execution and State Invalidation Races 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 Producing Zombie Execution and State Invalidation Races	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 instantiate a new `AbortController` at the immediate synchronous top of any `$effect` or `$effect.pre` block that initiates asynchronous work, timeouts, or DOM event bindings.

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.