Svelte 5 Runes Async State & Effect Cancellation Fence Guardrail

--- description: Svelte 5 Runes Async State & Effect Cancellation Fence Guardrail - Enforces deterministic cancellation fences and monotonic generation checks for asynchronous operations driven by Svelte 5 runes. Prevents state tearing, out-of-order promise settlement, and microtask memory leaks during rapid client-side transitions by requiring AbortController cleanups in effects and custom resource runes. globs: src/**/*.{svelte,svelte.ts,ts} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-async-derived-race-condition-guardrail" --- # Svelte 5 Runes Async State & Effect Cancellation Fence Guardrail > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Unfenced Async Invocations within Runes Resulting in Stale Promise Overwrites and State Tearing ## System Constraints You are a Principal Software Architect enforcing rigorous concurrency controls in Svelte 5. Svelte 5 runes ($derived, $effect) execute synchronously; asynchronous derived computations must explicitly manage cancellation, state disposal, and monotonically increasing generation fences to prevent out-of-order execution and stale state overwrites. ## Strict Guidelines - Engineers MUST ALWAYS return a synchronous cleanup function from `$effect` or custom async rune wrappers that triggers `AbortController.abort()` to cancel pending network requests or async tasks. - Engineers MUST NOT execute unfenced async functions inside `$effect` without guarding against out-of-sequence resolution (race conditions across state transitions). - Code MUST verify `signal.aborted` or evaluate a local monotonic sequence ID (generation token) prior to committing any asynchronous payload into `$state` variables. - Custom async derived primitives MUST encapsulate loading, data, error, and abort semantics into a cohesive resource pattern rather than ad-hoc disjointed `$state` variables. - Components NEVER rely on `$derived` to directly execute async side-effects, as `$derived` is strictly synchronous and pure by architectural contract. ## Bad vs Good Implementations ### Async State Invalidation and Cancellation in Svelte 5 Runes #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: When userId changes rapidly, concurrent network requests are dispatched without cancellation. Slower or delayed responses from earlier requests overwrite newer state, causing state tearing and displaying incorrect data. ```typescript import { browser } from '$app/environment'; let userId = $state('user-1'); let userData = $state<UserData | null>(null); let isLoading = $state(false); // ANTI-PATTERN: Async effect without cancellation fence or monotonic check $effect(() => { if (!browser) return; isLoading = true; fetch(`/api/users/${userId}`) .then(res => res.json()) .then(data => { // Race condition: Fast sequential updates (e.g. user-1 -> user-2 -> user-1) // cause user-2 to resolve after user-1, tearing state permanently. userData = data; isLoading = false; }); }); ``` #### Production Standard (Correct) > **Standard**: An AbortController instance is bound synchronously to the execution cycle of $effect. The returned cleanup function immediately aborts the active fetch, preventing out-of-order promise resolution, stale state mutations, and unhandled microtask leakage. ```typescript import { browser } from '$app/environment'; interface UserData { id: string; name: string; } let userId = $state('user-1'); let userData = $state<UserData | null>(null); let isLoading = $state(false); let error = $state<Error | null>(null); // PRODUCTION INVARIANT: Synchronous cancellation fence using AbortController $effect(() => { if (!browser) return; const currentId = userId; const controller = new AbortController(); const { signal } = controller; isLoading = true; error = null; fetch(`/api/users/${currentId}`, { signal }) .then(async (res) => { if (!res.ok) throw new Error(`HTTP ${res.status}`); return (await res.json()) as UserData; }) .then((data) => { if (!signal.aborted) { userData = data; isLoading = false; } }) .catch((err: unknown) => { if (err instanceof DOMException && err.name === 'AbortError') { return; // Normal cancellation, ignore } if (!signal.aborted) { error = err instanceof Error ? err : new Error(String(err)); isLoading = false; } }); return () => { // Synchronously abort the in-flight request when dependencies change or component unmounts controller.abort(); }; }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Async State & Effect Cancellation Fence Guardrail

Svelte 5 Runes Async State & Effect Cancellation Fence Guardrail defines an industrial-grade behavioral standard for frontend engineering. Enforces deterministic cancellation fences and monotonic generation checks for asynchronous operations driven by Svelte 5 runes. Prevents state tearing, out-of-order promise settlement, and microtask memory leaks during rapid client-side transitions by requiring AbortController cleanups in effects and custom resource runes. 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: Unfenced Async Invocations within Runes Resulting in Stale Promise Overwrites and State Tearing 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	Unfenced Async Invocations within Runes Resulting in Stale Promise Overwrites and State Tearing	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 from `$effect` or custom async rune wrappers that triggers `AbortController.abort()` to cancel pending network requests or async tasks.

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.