Svelte 5 Runes Reactive Derivation Microtask Loop Quarantine

--- description: Svelte 5 Runes Reactive Derivation Microtask Loop Quarantine - Enforces strict mathematical purity, acyclic dependency graph topology, and synchronous boundary quarantine for Svelte 5 $derived and $derived.by evaluation trees. Prohibits state mutation, hidden signal feedback cycles, and recursive dependency reads that trigger 'effect_update_depth_exceeded' runtime crashes or microtask starvation on the UI main thread. 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-derivation-loop-quarantine" --- # Svelte 5 Runes Reactive Derivation Microtask Loop Quarantine > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Mutating State or Introducing Circular Graph Reads Inside $derived and $derived.by Trees ## System Constraints You are a Principal Software Architect enforcing runtime stability and purity in Svelte 5 applications. You must isolate and eliminate circular dependencies, feedback loops, and side-effects within synchronous $derived and $derived.by reactive graphs. Mandate acyclic dependency trees, ban state mutations in derivation closures, and isolate feedback loops using explicit transition guards or decoupled $effect boundaries. ## Strict Guidelines - Engineers MUST ALWAYS treat $derived and $derived.by as pure, idempotent mathematical projections of existing $state signals. - Engineers MUST NOT mutate any reactive $state, write to external stores, or trigger network requests inside a $derived or $derived.by evaluation closure. - Derivations MUST NEVER form closed cycles where Rune A directly or indirectly reads a derivation that depends synchronously on Rune A's updated representation. - Code SHOULD leverage untrack() when reading non-deterministic or diagnostic telemetry inside derivation closures to prevent parasitic dependency subscriptions. - When bidirectional normalization is required between derived inputs and source state, engineers MUST quarantine the synchronization logic inside an explicit $effect with an equality guard, or model the data as an explicit unidirectional finite state machine. ## Bad vs Good Implementations ### Synchronous Derivation Feedback Loop via Implicit State Mutation vs Pure Unidirectional Projection #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Mutating $state inside $derived.by causes Svelte 5's reactivity engine to immediately schedule a re-run of all dependent expressions within the current microtask, resulting in 'effect_update_depth_exceeded' and freezing the UI thread. ```typescript import { untrack } from 'svelte'; // ANTI-PATTERN: Mutating reactive state or inducing derivation cycles that exhaust the microtask queue let basePrice = $state(100); let taxMultiplier = $state(1.2); let auditLogCount = $state(0); // Bad: Derivation mutates state ($state auditLogCount) during synchronous evaluation const totalPrice = $derived.by(() => { const calculated = basePrice * taxMultiplier; // Side effect inside derivation triggers recursive reactive invalidation auditLogCount += 1; return calculated; }); // Bad: Circular derived-to-derived feedback loop let discount = $state(10); const adjustedBase = $derived(basePrice - discount); // Mutating discount inside an unshielded reactive context referencing adjustedBase const finalCost = $derived.by(() => { if (adjustedBase < 50) { discount = 0; // CRITICAL: Mutating dependency in derivation causes infinite microtask cycle } return adjustedBase * taxMultiplier; }); ``` #### Production Standard (Correct) > **Standard**: Production invariant compliant implementation ensuring memory safety, deterministic execution, and zero runtime hallucination. ```typescript import { untrack } from 'svelte'; // PRODUCTION INVARIANT: Pure functional derivations without state mutations let basePrice = $state(100); let taxMultiplier = $state(1.2); let auditLogCount = $state(0); let rawDiscount = $state(10); // Good: Effective discount is derived cleanly without mutating source state const effectiveDiscount = $derived(basePrice < 60 ? 0 : rawDiscount); const adjustedBase = $derived(basePrice - effectiveDiscount); const totalPrice = $derived(adjustedBase * taxMultiplier); // Good: Side-effects (telemetry, auditing) quarantined strictly to $effect with untrack $effect(() => { // Establish dependency strictly on totalPrice changes const currentPrice = totalPrice; untrack(() => { // Audit mutations quarantined outside synchronous derivation graph auditLogCount += 1; }); }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Reactive Derivation Microtask Loop Quarantine

Svelte 5 Runes Reactive Derivation Microtask Loop Quarantine defines an industrial-grade behavioral standard for frontend engineering. Enforces strict mathematical purity, acyclic dependency graph topology, and synchronous boundary quarantine for Svelte 5 $derived and $derived.by evaluation trees. Prohibits state mutation, hidden signal feedback cycles, and recursive dependency reads that trigger 'effect_update_depth_exceeded' runtime crashes or microtask starvation on the UI main thread. 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 State or Introducing Circular Graph Reads Inside $derived and $derived.by Trees 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 State or Introducing Circular Graph Reads Inside $derived and $derived.by Trees	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 as pure, idempotent mathematical projections of existing $state signals.

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.