Svelte 5 Runes Microtask Scheduler Loop & State Tearing Guardrail

--- description: Svelte 5 Runes Microtask Scheduler Loop & State Tearing Guardrail - Enforces strict boundaries around asynchronous operations inside Svelte 5 runes ($effect, $derived) to prevent microtask scheduler loops and state tearing. Svelte 5's fine-grained push-pull signals batch synchronous reads and writes; interleaving async awaits directly within reactive contexts without untrack() or local transaction state causes circular reactivity queues and stale signal closures across tick boundaries. 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-microtask-scheduler-loop-guardrail" --- # Svelte 5 Runes Microtask Scheduler Loop & State Tearing Guardrail > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Mutating reactive state across un-isolated async ticks in $effect triggering infinite scheduler cascades ## System Constraints You are a Principal Software Architect enforcing Svelte 5 Rune scheduler invariants. You must prevent microtask cascades, infinite effect execution loops, and asynchronous signal tearing across $effect, $derived, and untrack boundaries. Under Svelte 5's fine-grained push-pull reactivity engine, reading and writing signals across microtask boundaries (e.g., following an `await` statement inside an `$effect`) creates detached dependencies or infinite feedback loops. Mandate strict isolation between tracking phases and mutation phases. ## Strict Guidelines - Engineers MUST ALWAYS isolate asynchronous operations in an `$effect` by extracting triggering signals before the first `await` boundary, using `untrack()` for reads or state mutations that occur after microtask suspension. - Engineers MUST NOT mutate a state signal read synchronously in the same `$effect` without wrapping the mutation or dependent read in `untrack()`, or separating concerns via command/action handlers. - Engineers MUST NEVER introduce async calls inside `$derived` or `$derived.by`; derived runes MUST remain pure synchronous projections of state. - Components MUST use AbortController or generation-counter cancellation tokens in asynchronous `$effect` bodies to prevent race conditions and out-of-order state settlement across ticks. - Services MUST batch multiple async state resolutions or leverage explicit non-reactive state intermediaries when handling multi-phase network streams to prevent premature microtask flush cascades. ## Bad vs Good Implementations ### Asynchronous Effect with Re-entrant Feedback Loop Prevention #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: When an effect directly executes asynchronous promises that mutate reactive state, rapid changes to `query` produce out-of-order race conditions where stale microtasks overwrite fresh state. Furthermore, if `data` or `loading` triggers downstream reads observed in the same scheduler batch, it risks re-queuing the microtask scheduler and tearing component tree states. ```typescript import { untrack } from 'svelte'; // Anti-pattern: Reading and mutating signals across microtask awaits triggers cascading loops and race conditions let query = $state(''); let data = $state<string[]>([]); let loading = $state(false); $effect(() => { // Accessing query sets dependency if (query) { loading = true; fetch(`/api/search?q=${query}`) .then(res => res.json()) .then(result => { // Unsafe: reading and writing state post-microtask without cancellation // Mutating data can inadvertently retrigger effects depending on downstream signals data = result; loading = false; }); } }); ``` #### Production Standard (Correct) > **Standard**: Synchronous signal access (`query`) is isolated as a pure trigger before microtask suspension. An AbortController guarantees that subsequent trigger iterations cancel stale in-flight microtasks, eliminating out-of-order race conditions. Wrapping post-await mutations in `untrack()` ensures that microtask state settlements cannot accidentally track unintended signals or trigger reciprocal microtask execution cascades. ```typescript import { untrack } from 'svelte'; let query = $state(''); let data = $state<string[]>([]); let loading = $state(false); $effect(() => { // 1. Explicitly isolate synchronous reactive trigger const currentQuery = query; if (!currentQuery) { data = []; loading = false; return; } // 2. Bound async lifetime via AbortController cleanup const controller = new AbortController(); loading = true; (async () => { try { const response = await fetch(`/api/search?q=${encodeURIComponent(currentQuery)}`, { signal: controller.signal }); const result = await response.json(); // 3. Apply state mutation untracked across microtask tick untrack(() => { data = result; loading = false; }); } catch (err: unknown) { if ((err as Error).name !== 'AbortError') { untrack(() => { loading = false; }); } } })(); // 4. Teardown handles scheduler cleanup and stale request cancellation return () => { controller.abort(); }; }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Microtask Scheduler Loop & State Tearing Guardrail

Svelte 5 Runes Microtask Scheduler Loop & State Tearing Guardrail defines an industrial-grade behavioral standard for frontend engineering. Enforces strict boundaries around asynchronous operations inside Svelte 5 runes ($effect, $derived) to prevent microtask scheduler loops and state tearing. Svelte 5's fine-grained push-pull signals batch synchronous reads and writes; interleaving async awaits directly within reactive contexts without untrack() or local transaction state causes circular reactivity queues and stale signal closures across tick boundaries. 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: Mutating reactive state across un-isolated async ticks in $effect triggering infinite scheduler cascades 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	Mutating reactive state across un-isolated async ticks in $effect triggering infinite scheduler cascades	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 isolate asynchronous operations in an `$effect` by extracting triggering signals before the first `await` boundary, using `untrack()` for reads or state mutations that occur after microtask suspension.

Engineers MUST ALWAYS isolate asynchronous operations in an `$effect` by extracting triggering signals before the first `await` boundary, using `untrack()` for reads or state mutations that occur after microtask suspension.

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.