Svelte 5 Runes Asynchronous Effect Isolation and Untrack Guardrail

--- description: Svelte 5 Runes Asynchronous Effect Isolation and Untrack Guardrail - Enforces strict isolation of fine-grained reactive signals within asynchronous Svelte 5 runes ($effect, $derived). Mandates untrack() for non-triggering dependencies and requires AbortController cancellation patterns to permanently eliminate post-microtask race conditions and cyclic dependency loops. 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-async-untrack-guardrail" --- # Svelte 5 Runes Asynchronous Effect Isolation and Untrack Guardrail > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Unquarantined Asynchronous State Mutation and Post-Await Signal Leaks in Svelte 5 Runes ## System Constraints You are a Principal Software Architect enforcing Svelte 5 reactivity invariants. In Svelte 5, rune dependency tracking is strictly synchronous: signal reads occurring before the first 'await' inside an $effect are tracked, whereas signal reads after an 'await' boundary are decoupled from the reactive context. Furthermore, un-isolated state writes occurring after microtask ticks trigger unhandled cyclic evaluations, stale response overwrites, and memory leaks. You must mandate strict quarantine of asynchronous logic using untrack(), explicit dependency declaration, and AbortController cancellation tokens. ## Strict Guidelines - Engineers MUST ALWAYS implement cleanup functions returning abort or cancellation logic within asynchronous $effect runes to discard out-of-order execution frames. - Engineers MUST explicitly encapsulate non-triggering reactive state reads inside untrack(() => ...) to prevent unintended dependency capture before asynchronous ticks. - Engineers MUST NEVER rely on reactive signal reads occurring after an 'await' boundary to establish reactive subscriptions, as Svelte 5 halts dependency tracking at the first microtask boundary. - Engineers MUST guard post-await signal mutations by verifying abort state (e.g., controller.signal.aborted) prior to committing mutations to $state. - Services and stores MUST NOT mix asynchronous derivation into $derived runes; all asynchronous fetches must reside in isolated $effect scopes or explicit resource management loaders. ## Bad vs Good Implementations ### Asynchronous Effect State Race and Untracked Leaks #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: The inner async IIFE lacks cancellation handling, meaning fast sequential changes to userId cause older, slower fetches to overwrite newer state. Additionally, telemetryConfig is read after an 'await' boundary, meaning updates to telemetryConfig will fail to re-trigger the effect, leading to phantom state discrepancies. ```typescript import { untrack } from 'svelte'; let userId = $state('user-1'); let profile = $state<Profile | null>(null); let telemetryConfig = $state({ enabled: true }); // ANTI-PATTERN: Post-await race condition and implicit post-await reads $effect(() => { // Synchronous read registers userId as dependency const currentId = userId; (async () => { const res = await fetch(`/api/users/${currentId}`); const data = await res.json(); // Race Condition: out-of-order network response commits stale data profile = data; // Invisible read: telemetryConfig is NOT tracked because it follows an await boundary if (telemetryConfig.enabled) { console.log(`Loaded user: ${currentId}`); } })(); }); ``` #### Production Standard (Correct) > **Standard**: All trigger dependencies are captured synchronously before any asynchronous tick. Non-triggering reads are explicitly quarantined using untrack(). An AbortController guarantees that obsolete network tasks are halted and post-await mutations are discarded, eliminating state corruption. ```typescript import { untrack } from 'svelte'; let userId = $state('user-1'); let profile = $state<Profile | null>(null); let telemetryConfig = $state({ enabled: true }); // PRODUCTION INVARIANT: AbortController lifecycle + untrack isolation $effect(() => { const currentId = userId; // Explicitly read telemetryConfig via untrack if it shouldn't trigger reruns, // or read it synchronously if it is an intended dependency. const isTelemetryEnabled = untrack(() => telemetryConfig.enabled); const controller = new AbortController(); async function fetchUser(signal: AbortSignal) { try { const res = await fetch(`/api/users/${currentId}`, { signal }); const data = await res.json(); if (!signal.aborted) { profile = data; if (isTelemetryEnabled) { console.log(`Loaded user: ${currentId}`); } } } catch (err: unknown) { if (err instanceof DOMException && err.name === 'AbortError') { return; } throw err; } } fetchUser(controller.signal); return () => { controller.abort(); }; }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Asynchronous Effect Isolation and Untrack Guardrail

Svelte 5 Runes Asynchronous Effect Isolation and Untrack Guardrail defines an industrial-grade behavioral standard for frontend engineering. Enforces strict isolation of fine-grained reactive signals within asynchronous Svelte 5 runes ($effect, $derived). Mandates untrack() for non-triggering dependencies and requires AbortController cancellation patterns to permanently eliminate post-microtask race conditions and cyclic dependency loops. 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: Unquarantined Asynchronous State Mutation and Post-Await Signal Leaks in Svelte 5 Runes 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	Unquarantined Asynchronous State Mutation and Post-Await Signal Leaks in Svelte 5 Runes	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 implement cleanup functions returning abort or cancellation logic within asynchronous $effect runes to discard out-of-order execution frames.

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.