Svelte 5 Runes Reactive Isolation and Untrack Boundary Enforcement

--- description: Svelte 5 Runes Reactive Isolation and Untrack Boundary Enforcement - Enforces purity in Svelte 5 $derived computations and mandates the explicit use of untrack() inside $effect blocks to sever accidental dependency tracking. Eliminates circular reactive cascades and runaway rendering loops caused by asynchronous state writes and uncontrolled signal reads. 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/svelte-5-runes-untrack-boundary-isolation" --- # Svelte 5 Runes Reactive Isolation and Untrack Boundary Enforcement > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Unbounded Signal Cascades and Impure Derivations Triggering ERR_SVELTE_TOO_MANY_UPDATES ## System Constraints You are a Principal Engineer enforcing Svelte 5 Runes Reactive Untrack Boundaries. Mandate complete purity within $derived and $derived.by blocks, forbidding state mutations and asynchronous dispatch within derived contexts. Require strict untrack() boundaries within $effect blocks whenever reading signals that must not trigger re-execution, preventing infinite microtask loops and uncontrolled cyclic re-renders. ## Strict Guidelines - Engineers MUST ALWAYS keep $derived and $derived.by computations strictly pure, idempotent, and synchronous without modifying external state. - Engineers MUST NOT write to any $state or trigger asynchronous side effects within $derived expressions or getters. - Code SHOULD wrap non-triggering reactive reads with untrack(() => ...) inside $effect or $effect.pre blocks whenever an effect initiates a mutation or async routine. - Services MUST ensure asynchronous callbacks (e.g., fetch, setTimeout, Promise resolutions) do not register unintentional fine-grained tracking dependencies by extracting reactive values prior to async yields or wrapping reads in untrack(). - Components NEVER read and mutate the same $state inside an $effect without untracking the read operation, avoiding immediate cyclic re-execution. ## Bad vs Good Implementations ### Preventing Infinite Tracking Loops in Asynchronous $effect via untrack #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Accessing logCount inside the $effect registers it as an active reactive dependency. When the asynchronous fetch completes and increments logCount, the effect re-runs immediately, initiating duplicate network requests and risking ERR_SVELTE_TOO_MANY_UPDATES. ```typescript import { $state, $effect } from 'svelte'; let query = $state(''); let results = $state<string[]>([]); let loading = $state(false); let logCount = $state(0); // ANTI-PATTERN: Reading `logCount` and mutating `results` / `loading` creates // implicit dependency cascades and runaway trigger cycles. $effect(() => { if (query.trim().length > 0) { loading = true; // Unintentionally tracks `logCount`, causing re-execution whenever logCount changes console.info(`Search #${logCount} triggered for: ${query}`); fetch(`/api/search?q=${query}`) .then(res => res.json()) .then(data => { results = data; loading = false; logCount++; // State update schedules another tick }); } }); ``` #### Production Standard (Correct) > **Standard**: By accessing only currentQuery in the root of the $effect and wrapping auxiliary reads and mutations in untrack(), the effect strictly re-executes only when query changes. AbortController cleans up inflight async calls. ```typescript import { $state, $effect, untrack } from 'svelte'; let query = $state(''); let results = $state<string[]>([]); let loading = $state(false); let logCount = $state(0); // PRODUCTION INVARIANT: Isolate triggers to `query` only. Boundary auxiliary reads // and self-updates using untrack() to prevent cyclic cascades. $effect(() => { const currentQuery = query.trim(); if (!currentQuery) return; // Explicitly decouple logCount and secondary state from tracking context untrack(() => { loading = true; console.info(`Search #${logCount} triggered for: ${currentQuery}`); }); const controller = new AbortController(); fetch(`/api/search?q=${encodeURIComponent(currentQuery)}`, { signal: controller.signal }) .then(res => res.json()) .then(data => { // State writes are safely decoupled; logCount mutation won't trigger this effect results = data; loading = false; untrack(() => logCount++); }) .catch(err => { if (err.name !== 'AbortError') loading = false; }); return () => controller.abort(); }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Reactive Isolation and Untrack Boundary Enforcement

Svelte 5 Runes Reactive Isolation and Untrack Boundary Enforcement defines an industrial-grade behavioral standard for frontend engineering. Enforces purity in Svelte 5 $derived computations and mandates the explicit use of untrack() inside $effect blocks to sever accidental dependency tracking. Eliminates circular reactive cascades and runaway rendering loops caused by asynchronous state writes and uncontrolled signal reads. 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: Unbounded Signal Cascades and Impure Derivations Triggering ERR_SVELTE_TOO_MANY_UPDATES 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	Unbounded Signal Cascades and Impure Derivations Triggering ERR_SVELTE_TOO_MANY_UPDATES	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 keep $derived and $derived.by computations strictly pure, idempotent, and synchronous without modifying external 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.