Svelte 5 Untracked Async Effect Race-Condition Fence

--- description: Svelte 5 Untracked Async Effect Race-Condition Fence - Enforces strict cancellation tokens and AbortController fences within Svelte 5 $effect workflows. Prevents out-of-order promise resolutions from clobbering fine-grained reactive state when rapid UI inputs re-trigger asynchronous tasks. globs: src/**/*.svelte, src/**/*.svelte.ts, src/**/*.svelte.js, src/**/*.ts alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte5-async-effect-race-condition-fence" --- # Svelte 5 Untracked Async Effect Race-Condition Fence > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Unfenced Async State Resolution in Svelte 5 $effect Causing Stale UI Clobbering ## System Constraints You are a Principal Software Architect enforcing production-grade concurrency invariants in Svelte 5 applications. You must ensure that all asynchronous side effects triggered within `$effect` blocks incorporate deterministic cancellation fences via `AbortController` or monotonic sequence tokens. Never allow asynchronous continuations after an `await` to mutate `$state` without verifying that the effect execution context remains current and active. Enforce the use of `untrack()` for auxiliary reads inside effects to prevent runaway execution chains. ## Strict Guidelines - Engineers MUST ALWAYS instantiate an `AbortController` or monotonic request counter at the synchronous entry point of any `$effect` executing async operations. - Engineers MUST ALWAYS return a synchronous teardown cleanup function from the `$effect` block that invokes `controller.abort()` or invalidates the token. - Engineers MUST NOT mutate `$state` runes across an `await` boundary without explicitly verifying `signal.aborted` or token identity. - Code MUST handle and suppress expected `AbortError` or `DOMException.ABORT_ERR` instances while propagating unexpected exceptions to telemetry. - Engineers MUST wrap non-triggering reactive reads inside `untrack(() => ...)` when reading secondary state needed during the async dispatch. ## Bad vs Good Implementations ### Fence Rapid Input Queries against Out-of-Order Async Resolution #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: The `$effect` initiates non-cancellable fetch promises on every change of `query`. When responses resolve out of order (e.g., query 'a' takes 500ms and subsequent query 'ab' takes 100ms), the stale response from 'a' completes last, overwriting the modern state with obsolete results. ```typescript import { untrack } from 'svelte'; // Anti-pattern: Rapid query changes trigger overlapping fetch requests. // A slow response from query 1 can overwrite the faster response from query 2. let query = $state(''); let results = $state<string[]>([]); let loading = $state(false); $effect(() => { if (!query) { results = []; return; } loading = true; // Anti-pattern: Async execution without cleanup or cancellation fence fetch(`/api/search?q=${encodeURIComponent(query)}`) .then(res => res.json()) .then(data => { // Race condition: Stale promise resolution clobbers newer state results = data; loading = false; }) .catch(err => { console.error(err); loading = false; }); }); ``` #### Production Standard (Correct) > **Standard**: Every invocation of `$effect` creates an isolated `AbortController` and returns a teardown function. If `query` changes before the network request finishes, the prior request is aborted immediately and state mutations are strictly bypassed. ```typescript import { untrack } from 'svelte'; let query = $state(''); let results = $state<string[]>([]); let loading = $state(false); $effect(() => { const currentQuery = query; if (!currentQuery) { results = []; loading = false; return; } const controller = new AbortController(); const { signal } = controller; loading = true; (async () => { try { const res = await fetch(`/api/search?q=${encodeURIComponent(currentQuery)}`, { signal }); if (!res.ok) throw new Error(`HTTP error: ${res.status}`); const data = await res.json(); // Guard fence: verify cancellation signal before applying state mutation if (!signal.aborted) { results = data; loading = false; } } catch (err: unknown) { if (err instanceof DOMException && err.name === 'AbortError') { return; // Expected cancellation; do not mutate state } if (!signal.aborted) { loading = false; console.error('Search request failed:', err); } } })(); // Return deterministic teardown to abort inflight requests upon next rune trigger return () => { controller.abort(); }; }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Untracked Async Effect Race-Condition Fence

Svelte 5 Untracked Async Effect Race-Condition Fence defines an industrial-grade behavioral standard for frontend engineering. Enforces strict cancellation tokens and AbortController fences within Svelte 5 $effect workflows. Prevents out-of-order promise resolutions from clobbering fine-grained reactive state when rapid UI inputs re-trigger asynchronous tasks. 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 State Resolution in Svelte 5 $effect Causing Stale UI Clobbering 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 State Resolution in Svelte 5 $effect Causing Stale UI Clobbering	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 an `AbortController` or monotonic request counter at the synchronous entry point of any `$effect` executing async operations.

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.