Svelte 5 Runes Reactive Scope Isolation Across Async Boundaries

--- description: Svelte 5 Runes Reactive Scope Isolation Across Async Boundaries - Enforces strict lexical encapsulation of $state and $derived runes across asynchronous micro-task boundaries to prevent reactive context detachment and memory leaks. Guarantees that async operations explicitly tie into lifecycle cancellation via AbortController and avoid capturing stale signal references across unmounted component trees. 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-runes-reactive-scope-isolation" --- # Svelte 5 Runes Reactive Scope Isolation Across Async Boundaries > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Capturing Reactive Runes in Asynchronous Continuations Without Teardown or Abort Mechanisms ## System Constraints You are a Principal Software Architect enforcing Svelte 5 Runes Reactive Scope Isolation. Svelte 5 reactivity relies on synchronous signal dependency tracking during effect execution. Any micro-task boundary (Promise, setTimeout, queueMicrotask, async/await) detaches execution from Svelte's reactive tracking context. You must ensure that asynchronous continuations do not leak component-scoped state, mutate unmounted signal graphs, or implicitly track signals across asynchronous pauses. Mandate explicit cancellation via AbortController and untrack() where appropriate. ## Strict Guidelines - Engineers MUST ALWAYS tie asynchronous tasks initiated within $effect to an AbortController returned in the effect's teardown function. - Engineers MUST NOT mutate $state runes after an asynchronous gap without verifying that the reactive scope is still active and valid. - Code SHOULD use untrack() when reading signals inside async continuations or callbacks if those reads should not re-trigger upstream reactive derivations. - Services MUST instantiate module-level $state runes within explicit lifecycle boundaries (e.g., per-request context or class factories) to avoid cross-request memory leaks in SSR environments. - Components NEVER expose bare mutable $state references into asynchronous event listeners without registering auto-cleanup on unmount. ## Bad vs Good Implementations ### Asynchronous Effect with Proper Lifecycle Teardown vs Dangling Async State Mutation #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: The fetch promise continuation executes in a micro-task outside Svelte's reactive tracking scope. If the component unmounts or userId changes before the fetch completes, the continuation still fires, mutating component-scoped $state, triggering detached reactive updates, and preventing garbage collection of the unmounted component tree. ```typescript import { untrack } from 'svelte'; let userId = $state<string>('usr_1'); let userData = $state<Record<string, unknown> | null>(null); let isLoading = $state<boolean>(false); // ANTI-PATTERN: Async effect with no teardown captures state across await. // If userId changes rapidly or component unmounts, stale micro-tasks mutate dead state, // causing race conditions and retaining component instances in memory. $effect(() => { const currentId = userId; isLoading = true; fetch(`/api/users/${currentId}`) .then(res => res.json()) .then(data => { // Post-microtask mutation: breaks encapsulation and risks race conditions userData = data; isLoading = false; }); }); ``` #### Production Standard (Correct) > **Standard**: Returning an explicit teardown function that calls controller.abort() ensures that pending micro-tasks are cancelled when dependencies change or the component unmounts, preventing cross-component memory leaks and stale signal mutations. ```typescript let userId = $state<string>('usr_1'); let userData = $state<Record<string, unknown> | null>(null); let isLoading = $state<boolean>(false); // PRODUCTION FIX: Explicit AbortController lifecycle integration $effect(() => { const controller = new AbortController(); const currentId = userId; isLoading = true; fetch(`/api/users/${currentId}`, { signal: controller.signal }) .then(res => { if (!res.ok) throw new Error('Network response failed'); return res.json(); }) .then(data => { userData = data; isLoading = false; }) .catch(err => { if (err.name !== 'AbortError') { isLoading = false; throw err; } }); return () => { // Synchronously aborts in-flight fetch and prevents post-unmount mutations controller.abort(); }; }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Reactive Scope Isolation Across Async Boundaries

Svelte 5 Runes Reactive Scope Isolation Across Async Boundaries defines an industrial-grade behavioral standard for frontend engineering. Enforces strict lexical encapsulation of $state and $derived runes across asynchronous micro-task boundaries to prevent reactive context detachment and memory leaks. Guarantees that async operations explicitly tie into lifecycle cancellation via AbortController and avoid capturing stale signal references across unmounted component trees. 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: Capturing Reactive Runes in Asynchronous Continuations Without Teardown or Abort Mechanisms 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	Capturing Reactive Runes in Asynchronous Continuations Without Teardown or Abort Mechanisms	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 tie asynchronous tasks initiated within $effect to an AbortController returned in the effect's teardown function.

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.