Svelte 5 Runes Effect Boundary & Reactive Loop Quota Enforcement

--- description: Svelte 5 Runes Effect Boundary & Reactive Loop Quota Enforcement - Enforces strict boundaries around $effect executions and state mutations in Svelte 5. Prevents runaway reactive cascades, cyclic microtask schedule exhaustion, and Svelte update quota crashes by mandating pure derivations via $derived and explicit boundary gating via untrack(). 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-effect-boundary-microtask-loop-quota" --- # Svelte 5 Runes Effect Boundary & Reactive Loop Quota Enforcement > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Mutating Tracked State Inside $effect Triggering Cyclic Microtask Cascades ## System Constraints You are a Principal Software Architect enforcing Svelte 5 Runes reactive lifecycle invariants. Mandate that $effect blocks are exclusively reserved for synchronization with external DOM APIs or non-reactive systems. Reject any pattern that uses $effect to synchronize reactive state or mutates reactive variables that the effect tracks, avoiding cyclic microtask scheduler exhaustion. ## Strict Guidelines - Engineers MUST ALWAYS use $derived or $derived.by for pure state derivations instead of updating a $state variable inside an $effect. - Engineers MUST NOT mutate any $state rune inside an $effect that is directly or transitively read by that same effect without explicit termination guards. - Code MUST wrap cross-component callbacks and non-dependent state reads in untrack() when invoking them inside an $effect to prevent unintended dependency subscription. - Components NEVER bridge sibling or parent-child state synchronization through chained $effect hooks; use explicit event handlers or controlled unidirectional data flow. - Services MUST isolate reactive mutation batching, ensuring that asynchronous microtasks do not trigger re-entrant effect flushes that exceed the runtime quota. ## Bad vs Good Implementations ### Preventing Cyclical Synchronization via $derived and untrack() #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Mutating 'filtered' and invoking 'onFilterApplied' inside $effect establishes an implicit reactive cycle. The effect tracks 'filtered' and the parent callback can trigger prop changes, causing immediate re-execution and exhausting Svelte's microtask loop quota. ```typescript import { untrack } from 'svelte'; // Anti-pattern: Synchronizing derived state and triggering parent callbacks inside $effect let { filter, onFilterApplied } = $props<{ filter: string; onFilterApplied: (data: string[]) => void }>(); let items = $state<string[]>(['alpha', 'beta', 'gamma']); let filtered = $state<string[]>([]); $effect(() => { // Tracking both filter and filtered leads to microtask thrashing or infinite cascades filtered = items.filter(item => item.includes(filter)); onFilterApplied(filtered); // Triggers parent re-render, potentially passing new props }); ``` #### Production Standard (Correct) > **Standard**: Deriving 'filtered' via $derived eliminates the internal mutation cycle. Wrapping 'onFilterApplied' in untrack() prevents the parent component's re-render from registering spurious subscriptions in this component's effect. ```typescript import { untrack } from 'svelte'; // Production invariant: Use $derived for computations and isolate external triggers with untrack() let { filter, onFilterApplied } = $props<{ filter: string; onFilterApplied: (data: string[]) => void }>(); let items = $state<string[]>(['alpha', 'beta', 'gamma']); // 1. Derive state synchronously and deterministically let filtered = $derived(items.filter(item => item.includes(filter))); // 2. Bound effect strictly to external side effects with deliberate tracking $effect(() => { // Read only the intended trigger dependency const currentResult = filtered; untrack(() => { onFilterApplied(currentResult); }); }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Effect Boundary & Reactive Loop Quota Enforcement

Svelte 5 Runes Effect Boundary & Reactive Loop Quota Enforcement defines an industrial-grade behavioral standard for frontend engineering. Enforces strict boundaries around $effect executions and state mutations in Svelte 5. Prevents runaway reactive cascades, cyclic microtask schedule exhaustion, and Svelte update quota crashes by mandating pure derivations via $derived and explicit boundary gating via untrack(). 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 Tracked State Inside $effect Triggering Cyclic Microtask Cascades 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 Tracked State Inside $effect Triggering Cyclic Microtask Cascades	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 pure state derivations instead of updating a $state variable inside an $effect.

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.