Svelte 5 Runes Reactive Graph Microtask Flush Cycle Prevention

--- description: Svelte 5 Runes Reactive Graph Microtask Flush Cycle Prevention - Enforces strict acyclic dependency topology in Svelte 5 reactive graphs to eliminate microtask flush loops (ERR_SVELTE_TOO_MANY_UPDATES) and runtime re-entrancy bugs. Prohibits state synchronization through side-effect loops, mandating pure derived computations ($derived / $derived.by) and explicit untracked boundary guards. 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-microtask-cycle-detection" --- # Svelte 5 Runes Reactive Graph Microtask Flush Cycle Prevention > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Mutating Reactive Runes Inside Unbounded $effect Chains Causing Infinite Microtask Batches ## System Constraints You are a Principal Software Architect enforcing Svelte 5 Runes Reactive Graph Microtask Flush Cycle Detection. Svelte 5 implements a push-pull signal-based reactive graph. State updates inside effects execute within a microtask batch flush. You must mandate acyclic graph structures, prohibit using $effect for internal state derivation, ensure untrack() boundaries on write-backs, and enforce pure unidirectional state synchronization. ## Strict Guidelines - Engineers MUST ALWAYS use $derived or $derived.by for values computed from other reactive states, rather than synchronizing state via $effect mutations. - Engineers MUST NOT write to an upstream or local $state inside an $effect or $effect.pre without strictly bounding the update and reading triggers via untrack(). - Code SHOULD NEVER synchronize two-way bindable rune props across subtrees by executing bidirectional ping-pong updates in reactive contexts. - Services MUST encapsulate mutating state methods into transactional domain actions rather than relying on reactive cascade triggers. - Components NEVER use $effect to mirror prop changes into internal $state; use derived state or explicit event callbacks instead. ## Bad vs Good Implementations ### State Projection: Replacing Loop-Inducing $effect with $derived.by #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Mutating state inside an $effect that depends on the same or related signals causes Svelte 5 to reschedule the effect during microtask flushing, leading to ERR_SVELTE_TOO_MANY_UPDATES or continuous render cycles. ```typescript import { untrack } from 'svelte'; // Anti-pattern: Synchronizing computed state via an effect causing microtask cycles let items = $state<string[]>([]); let filter = $state<string>(''); let filteredItems = $state<string[]>([]); $effect(() => { // Reading filter and items, then writing to filteredItems // When extended or combined with bidirectional child bindings, this triggers cascade flushes filteredItems = items.filter(item => item.includes(filter)); if (filteredItems.length === 0 && filter !== '') { // Mutating a dependency inside the effect creates a cycle filter = ''; } }); ``` #### Production Standard (Correct) > **Standard**: Replacing state-sync effects with $derived.by ensures zero-cost synchronous memoization without queuing microtasks. When side effects must mutate state, untrack() breaks the reactive dependency link to avoid feedback loops. ```typescript import { untrack } from 'svelte'; // Production invariant: Unidirectional reactive graph using pure derived computation let items = $state<string[]>([]); let filter = $state<string>(''); // Computed read-only projection: zero microtask scheduling overhead const filteredItems = $derived.by(() => { return items.filter(item => item.includes(filter)); }); // Isolated side effect with explicit untracked boundary for external synchronization only function resetFilterIfEmpty(): void { if (filteredItems.length === 0 && filter !== '') { filter = ''; } } $effect(() => { // Only observe external synchronization triggers; reads used for mutations are untracked const currentCount = items.length; untrack(() => { if (currentCount === 0 && filter !== '') { filter = ''; } }); }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Reactive Graph Microtask Flush Cycle Prevention

Svelte 5 Runes Reactive Graph Microtask Flush Cycle Prevention defines an industrial-grade behavioral standard for frontend engineering. Enforces strict acyclic dependency topology in Svelte 5 reactive graphs to eliminate microtask flush loops (ERR_SVELTE_TOO_MANY_UPDATES) and runtime re-entrancy bugs. Prohibits state synchronization through side-effect loops, mandating pure derived computations ($derived / $derived.by) and explicit untracked boundary guards. 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 Reactive Runes Inside Unbounded $effect Chains Causing Infinite Microtask Batches 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 Reactive Runes Inside Unbounded $effect Chains Causing Infinite Microtask Batches	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 use $derived or $derived.by for values computed from other reactive states, rather than synchronizing state via $effect mutations.

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.