Svelte 5 Runes Reactive Graph Deep Mutation and Untrack Invariant

--- description: Svelte 5 Runes Reactive Graph Deep Mutation and Untrack Invariant - Enforces deterministic signal dependency tracking in Svelte 5 by establishing strict boundaries between reactive triggers and non-reactive graph reads or deep mutations. Mandates the use of untrack() inside effects to prevent unintended dependency subscription loops, cyclic cascade thrashing, and memory degradation across high-frequency mutable UI graphs. 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-reactive-graph-untrack-invariant" --- # Svelte 5 Runes Reactive Graph Deep Mutation and Untrack Invariant > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Cyclic Signal Thrashing via Unbounded Reactive Reads in Deeply Mutated Svelte 5 Effects ## System Constraints You are a Principal Software Architect enforcing Svelte 5 Runes Reactive Graph Deep Mutation Untrack Invariants. Svelte 5 uses deep proxy-based reactive tracking via signals ($state). Reading any property of a deeply reactive object inside an active tracking scope ($effect, $effect.pre, $derived) registers that specific signal node as a dependency. When operations read high-frequency graph nodes and perform subsequent mutations or secondary queries within the same effect context, cyclic invalidation cascades and memory pressure occur. You must mandate untrack() for all secondary reads and auxiliary mutations, enforce $state.raw for high-frequency or non-granular payloads, and prohibit side effects in derived computations. ## Strict Guidelines - Engineers MUST ALWAYS isolate intentional dependency triggers from auxiliary reads in $effect and $effect.pre by enclosing secondary state reads inside untrack(). - Engineers MUST NOT read mutable $state properties inside an $effect if those properties or their parent graph branches are mutated within that same effect without wrapping the read or write scope in untrack(). - Engineers MUST leverage $state.raw instead of $state for high-frequency data structures (e.g., WebGL buffers, telemetry streams, canvas node trees) where fine-grained property-level proxy observation creates unacceptable overhead. - Code SHOULD encapsulate graph mutation routines into pure external action functions that execute outside reactive contexts, accepting target identifiers rather than binding directly to ambient proxy state. - Components NEVER execute side effects or mutate upstream reactive state within a $derived or $derived.by rune; derived expressions must remain strictly pure, read-only projections of the dependency graph. ## Bad vs Good Implementations ### Preventing Infinite Invalidation Loop in Graph Node Selection #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: In Svelte 5, deep proxy tracking means reading `nodeGraph.nodes` and `nodeGraph.lastAccessed` subscribes the effect to changes on those properties. Mutating `nodeGraph.lastAccessed` and `node.metrics.accessCount` inside the effect marks those dependencies dirty, creating an infinite invalidation loop and freezing the UI thread. ```typescript import { nodeGraph, activeSelectionId } from './graphState.svelte'; // ANTI-PATTERN: Reading nodeGraph.nodes registers the entire graph proxy. // Mutating metadata and metrics within the same effect triggers infinite cyclic re-runs. $effect(() => { const id = activeSelectionId.current; const node = nodeGraph.nodes.get(id); if (node) { // Deep read on nodeGraph registers dependency const previousTimestamp = nodeGraph.lastAccessed; // Deep mutation immediately invalidates nodeGraph, scheduling another effect execution nodeGraph.lastAccessed = Date.now(); node.metrics.accessCount += 1; console.log(`Node accessed: ${node.id}, delta: ${Date.now() - previousTimestamp}`); } }); ``` #### Production Standard (Correct) > **Standard**: By wrapping the graph lookup, metadata read, and mutation inside `untrack()`, the effect only registers `activeSelectionId.current` in its reactive dependency set. Mutating `nodeGraph` properties no longer retriggers the effect, preserving deterministic execution. ```typescript import { untrack } from 'svelte'; import { nodeGraph, activeSelectionId } from './graphState.svelte'; // PRODUCTION INVARIANT: Only activeSelectionId.current acts as the reactive trigger. // All reads and mutations on the mutable graph are bounded inside untrack(). $effect(() => { const id = activeSelectionId.current; // Single deterministic trigger dependency untrack(() => { const node = nodeGraph.nodes.get(id); if (!node) return; const previousTimestamp = nodeGraph.lastAccessed; nodeGraph.lastAccessed = Date.now(); node.metrics.accessCount += 1; console.log(`Node accessed: ${node.id}, delta: ${Date.now() - previousTimestamp}`); }); }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Reactive Graph Deep Mutation and Untrack Invariant

Svelte 5 Runes Reactive Graph Deep Mutation and Untrack Invariant defines an industrial-grade behavioral standard for frontend engineering. Enforces deterministic signal dependency tracking in Svelte 5 by establishing strict boundaries between reactive triggers and non-reactive graph reads or deep mutations. Mandates the use of untrack() inside effects to prevent unintended dependency subscription loops, cyclic cascade thrashing, and memory degradation across high-frequency mutable UI graphs. 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: Cyclic Signal Thrashing via Unbounded Reactive Reads in Deeply Mutated Svelte 5 Effects 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	Cyclic Signal Thrashing via Unbounded Reactive Reads in Deeply Mutated Svelte 5 Effects	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 intentional dependency triggers from auxiliary reads in $effect and $effect.pre by enclosing secondary state reads inside untrack().

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.