Svelte 5 Runes Reactive Graph Cycle and Evaluation Depth Guardrail

--- description: Svelte 5 Runes Reactive Graph Cycle and Evaluation Depth Guardrail - Enforces topological acyclicity and bounded evaluation depth across Svelte 5 rune-based signal graphs. Prevents runtime ERR_SVELTE_TOO_MANY_UPDATES microtask panics by prohibiting cyclic feedback between $effect mutations and $derived signal graphs, mandating explicit cycle-break boundaries via untrack() and single-source-of-truth architectures. globs: src/**/*.{svelte,svelte.ts,ts} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-runes-reactive-cycle-guardrail" --- # Svelte 5 Runes Reactive Graph Cycle and Evaluation Depth Guardrail > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Cascading Microtask Loops via Reciprocal $effect State Feedback and Impure $derived Graphs ## System Constraints You are a Principal Frontend Architect enforcing deterministic reactivity in Svelte 5 applications. Svelte 5 replaces runtime dirty-checking with fine-grained push-pull signals (Runes). You must enforce strict acyclic reactive graphs: $derived and $derived.by MUST be pure, side-effect-free, and deterministic; $effect MUST NEVER mutate state dependencies it reads without untrack(); and bidirectional synchronization between states MUST be modeled via explicit event transitions rather than reciprocal $effect feedback loops. ## Strict Guidelines - Engineers MUST NEVER mutate upstream $state inside $derived or $derived.by expressions under any condition. - Engineers MUST NOT create reciprocal $effect loops where state A triggers an update to state B, which subsequently updates state A. - Engineers MUST break reactive dependency tracking using untrack() whenever reading a $state inside an $effect solely to compute an argument or conditional boundary that should not trigger re-execution. - Code SHOULD represent bidirectional UI state (e.g., paired unit inputs, currency converters) using a single canonical $state rune alongside pure $derived projections and explicit user-action handlers, eliminating synchronization effects. - Components NEVER use $effect to mirror, cache, or reconcile props into local $state; transform incoming props through $derived or manage mutations via functional upward notifications. - Services MUST encapsulate complex reactive workflows with explicit state machines or transactional command dispatches rather than reactive pinball cascades across multiple standalone $effect blocks. ## Bad vs Good Implementations ### Bidirectional State Synchronization: Reciprocal $effect Ping-Pong vs Canonical Source of Truth #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Both $effect runes read and write to state monitored by the opposite effect. Any mutation triggers an asynchronous cascade that exhausts microtask queues and crashes with ERR_SVELTE_TOO_MANY_UPDATES. ```typescript // BAD: Reciprocal $effect blocks cause infinite microtask loops and trigger Svelte cycle panics let celsius = $state(0); let fahrenheit = $state(32); $effect(() => { // Celsius update pushes to Fahrenheit fahrenheit = (celsius * 9) / 5 + 32; }); $effect(() => { // Fahrenheit update pushes back to Celsius, triggering infinite microtask feedback celsius = ((fahrenheit - 32) * 5) / 9; }); ``` #### Production Standard (Correct) > **Standard**: Reactivity is strictly directed and acyclic. Celsius is the single source of truth; fahrenheit is a pure projection ($derived). Transitions occur strictly via discrete transactional user handlers. ```typescript // GOOD: Single canonical $state rune with pure $derived representation and explicit update actions let celsius = $state(0); const fahrenheit = $derived((celsius * 9) / 5 + 32); function setCelsius(val: number): void { celsius = val; } function setFahrenheit(val: number): void { celsius = ((val - 32) * 5) / 9; } ``` ### Side-Effect Read/Write Cycle: Implicit Tracking vs Explicit Cycle-Breaking with untrack() #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: The effect accesses history.length while also writing to history. Because history is an active reactive dependency in the same effect, the write can re-trigger the effect continuously under concurrent updates. ```typescript // BAD: Effect reads query and updates history, inadvertently subscribing history to itself let query = $state(''); let history = $state<string[]>([]); $effect(() => { if (query.trim().length > 0) { // Reading history.length subscribes this effect to history mutations! if (history.length > 50) { history = [...history.slice(1), query]; } else { history = [...history, query]; } } }); ``` #### Production Standard (Correct) > **Standard**: Wrapping history access in untrack() ensures the reactive dependency set of the effect contains only query. The effect executes strictly when query changes, never re-triggering itself. ```typescript import { untrack } from 'svelte'; // GOOD: history read is untracked; effect depends strictly on query changes let query = $state(''); let history = $state<string[]>([]); $effect(() => { const currentQuery = query.trim(); if (currentQuery.length === 0) return; untrack(() => { const currentHistory = history; const nextHistory = currentHistory.length >= 50 ? currentHistory.slice(1) : currentHistory; history = [...nextHistory, currentQuery]; }); }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Reactive Graph Cycle and Evaluation Depth Guardrail

Svelte 5 Runes Reactive Graph Cycle and Evaluation Depth Guardrail defines an industrial-grade behavioral standard for frontend engineering. Enforces topological acyclicity and bounded evaluation depth across Svelte 5 rune-based signal graphs. Prevents runtime ERR_SVELTE_TOO_MANY_UPDATES microtask panics by prohibiting cyclic feedback between $effect mutations and $derived signal graphs, mandating explicit cycle-break boundaries via untrack() and single-source-of-truth architectures. 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: Cascading Microtask Loops via Reciprocal $effect State Feedback and Impure $derived 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	Cascading Microtask Loops via Reciprocal $effect State Feedback and Impure $derived 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 NEVER mutate upstream $state inside $derived or $derived.by expressions under any condition.

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.