Svelte 5 Runes Reactive Cycle Containment & Microtask Starvation Prevention

--- description: Svelte 5 Runes Reactive Cycle Containment & Microtask Starvation Prevention - Enforces strict mathematical purity in $derived and $derived.by execution graphs to prevent microtask-loop starvation in high-frequency trading and monitoring dashboards. Prohibits reading transitively mutated state inside reactive derivations and enforces decoupled asynchronous state propagation via discrete effect handlers and event queues. 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-reactive-cycle-containment-standard" --- # Svelte 5 Runes Reactive Cycle Containment & Microtask Starvation Prevention > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Asynchronous Mutation Cascade Triggered Inside or Synchronously Downstream of $derived.by Computation Graphs ## System Constraints You are a Principal Frontend Architect enforcing the Svelte 5 Runes Fine-Grained Reactive Cycle Containment Standard. You must strictly forbid side-effects, implicit asynchronous state dispatching, and cross-component bidirectional reactive sync inside $derived or $derived.by blocks. Mandate untracked boundary protection and asynchronous debouncing to maintain 60-120 FPS in high-throughput data environments. ## Strict Guidelines - Engineers MUST ALWAYS treat $derived and $derived.by runes as mathematically pure, read-only functional projections of current reactive state. - Engineers MUST NEVER execute side-effects, mutate external $state runes, or dispatch asynchronous promises directly inside $derived.by blocks. - Engineers MUST use untrack() whenever reading secondary metrics inside an effect to prevent unintentional subscription coupling across distinct reactivity graphs. - High-frequency telemetry ingestion pipelines MUST buffer cross-component mutations via structured queues or requestAnimationFrame schedulers rather than chaining direct $state updates inside $effect. - Components NEVER bridge upward parent state updates synchronously through deep reactive derivations or two-way $bindable loops triggered by rapid socket payloads. ## Bad vs Good Implementations ### Decoupling High-Frequency Metric Aggregation from Reactive Derivations #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Mutating reactive state and enqueueing asynchronous updates inside a $derived.by block contaminates the reactive dependency graph, forcing re-computations that saturate the browser microtask queue and freeze UI rendering. ```typescript import { untrack } from 'svelte'; // Anti-pattern: Derived evaluation triggers out-of-band state mutation causing microtask starvation let rawTick = $state({ price: 0, timestamp: 0 }); let aggregatedAverage = $state(0); let historyCount = $state(0); export const analytics = $derived.by(() => { const current = rawTick.price; // VIOLATION: Mutating external state inside a derived rune execution graph historyCount += 1; aggregatedAverage = (aggregatedAverage * (historyCount - 1) + current) / historyCount; // VIOLATION: Spawning microtasks from within a derivation queueMicrotask(() => { if (current > 1000) { rawTick.price = 1000; // Triggers infinite invalidation loop } }); return { current, average: aggregatedAverage }; }); ``` #### Production Standard (Correct) > **Standard**: The computation graph remains fully deterministic and pure. Updates are processed through explicit command methods, guaranteeing zero runaway microtasks and predictable DOM scheduling. ```typescript import { untrack } from 'svelte'; interface Tick { price: number; timestamp: number; } class MarketMetricsStore { #rawTick = $state<Tick>({ price: 0, timestamp: 0 }); #history = $state<number[]>([]); // PURE: $derived computes purely functional projections without state mutation public readonly metrics = $derived.by(() => { const prices = this.#history; if (prices.length === 0) return { current: this.#rawTick.price, average: 0 }; const sum = prices.reduce((acc, val) => acc + val, 0); return { current: this.#rawTick.price, average: sum / prices.length }; }); // Explicit command pipeline for asynchronous/high-frequency state updates public ingestTick(tick: Tick): void { const clampedPrice = Math.min(tick.price, 1000); this.#rawTick = { price: clampedPrice, timestamp: tick.timestamp }; this.#history = [...this.#history.slice(-99), clampedPrice]; } } export const store = new MarketMetricsStore(); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Reactive Cycle Containment & Microtask Starvation Prevention

Svelte 5 Runes Reactive Cycle Containment & Microtask Starvation Prevention defines an industrial-grade behavioral standard for frontend engineering. Enforces strict mathematical purity in $derived and $derived.by execution graphs to prevent microtask-loop starvation in high-frequency trading and monitoring dashboards. Prohibits reading transitively mutated state inside reactive derivations and enforces decoupled asynchronous state propagation via discrete effect handlers and event queues. 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: Asynchronous Mutation Cascade Triggered Inside or Synchronously Downstream of $derived.by Computation Graphs 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	Asynchronous Mutation Cascade Triggered Inside or Synchronously Downstream of $derived.by Computation Graphs	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 treat $derived and $derived.by runes as mathematically pure, read-only functional projections of current reactive state.

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.