Svelte 5 Runes Effect Lifecycle Isolation and Mutation Purity

--- description: Svelte 5 Runes Effect Lifecycle Isolation and Mutation Purity - Enforces architectural boundaries for Svelte 5 runes ($effect, $effect.pre, $derived, $state) to eliminate infinite reactive invalidation loops, memory leaks, and race conditions. Mandates pure synchronous derivation via $derived, selective reactive dependency isolation with untrack(), and mandatory disposal teardown closures for all ambient allocations. 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/svelte5-runes-effect-lifecycle-isolation" --- # Svelte 5 Runes Effect Lifecycle Isolation and Mutation Purity > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Synchronous State Mutation and Untracked Side-Effects Inside $effect Causing Cascade Render Loops and Memory Leaks ## System Constraints You are a Principal Engineer enforcing Svelte 5 Runes Fine-Grained Effect Lifecycle Isolation. Mandate strict reactive signal boundaries, zero derived state mutations within $effect, deterministic cleanup returns, and targeted untrack() containment to prevent recursive execution cycles and resource exhaustion. ## Strict Guidelines - Engineers MUST ALWAYS use $derived or $derived.by for values computed from other reactive state instead of mutating $state inside an $effect. - Engineers MUST NOT synchronously mutate state dependencies inside $effect or $effect.pre that are also read by that same effect, preventing 'effect_update_depth_exceeded' crashes. - Code MUST provide a synchronous teardown cleanup function returned from any $effect that registers DOM event listeners, sets timers, opens WebSocket streams, or mounts external libraries. - Code MUST wrap non-dependency signal reads in untrack() when reading state inside an $effect that should not cause the effect to re-run on signal mutation. - Components NEVER execute long-running asynchronous promises inside $effect without AbortController cancellation tokens or local closure discard flags to prevent stale state updates and race conditions. ## Bad vs Good Implementations ### State Synchronization vs. Pure Derivation and Cleanup #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Using $effect to assign 'doubled' causes unnecessary microtask churn and risks infinite recursion. The window resize listener creates a zombie memory leak because it does not return a teardown function, and it unintentionally re-registers whenever 'count' changes because 'count' was read inside the effect without untrack(). ```typescript import { onMount } from 'svelte'; let count = $state(0); let doubled = $state(0); let windowWidth = $state(0); // ANTI-PATTERN: Mutating state inside an effect to synchronize state $effect(() => { doubled = count * 2; // Causes cascading reactive pass }); // ANTI-PATTERN: Ambient listener leak with un-isolated read dependency $effect(() => { window.addEventListener('resize', () => { windowWidth = window.innerWidth; }); console.log('Current count during resize listener attach:', count); // Missing teardown function leads to duplicate listeners on every count change }); ``` #### Production Standard (Correct) > **Standard**: Derived state uses the $derived rune, guaranteeing zero runtime recalculation cascades. The resize listener binds with an AbortController and returns a disposal closure, while reading 'count' through untrack() to decouple external signal mutations from listener re-registration. ```typescript import { untrack } from 'svelte'; let count = $state(0); let windowWidth = $state(typeof window !== 'undefined' ? window.innerWidth : 0); // INVARIANT: Computed state is strictly derived, pure, and synchronous const doubled = $derived(count * 2); // INVARIANT: Side-effects isolate reads with untrack() and return deterministic cleanup $effect(() => { const controller = new AbortController(); const { signal } = controller; // untrack prevents count mutations from re-triggering this effect const initialCount = untrack(() => count); console.log('Subscribing resize listener. Initial count snapshot:', initialCount); window.addEventListener( 'resize', () => { windowWidth = window.innerWidth; }, { signal } ); return () => { controller.abort(); }; }); ``` ### Asynchronous Race Condition Isolation in Effects #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: If the 'query' state changes rapidly, multiple network requests resolve asynchronously out-of-order. A slow earlier response will overwrite the newer result, and state updates occur without active lifecycle cancellation. ```typescript let query = $state(''); let results = $state<string[]>([]); let loading = $state(false); // ANTI-PATTERN: Unhandled async execution creates race conditions and state corruption $effect(() => { if (!query) return; loading = true; fetch(`/api/search?q=${encodeURIComponent(query)}`) .then(res => res.json()) .then(data => { // Out of order responses will overwrite newer queries with stale data results = data; loading = false; }); }); ``` #### Production Standard (Correct) > **Standard**: The cleanup function returned by $effect aborts pending HTTP requests when 'query' mutates before the promise resolves, eliminating network race conditions and preventing stale state application. ```typescript let query = $state(''); let results = $state<string[]>([]); let loading = $state(false); // INVARIANT: Async operations isolate lifecycle using AbortController cancellation in cleanup $effect(() => { const currentQuery = query.trim(); if (!currentQuery) { results = []; loading = false; return; } const controller = new AbortController(); loading = true; fetch(`/api/search?q=${encodeURIComponent(currentQuery)}`, { signal: controller.signal }) .then((res) => res.json()) .then((data: string[]) => { results = data; loading = false; }) .catch((err: unknown) => { if (err instanceof DOMException && err.name === 'AbortError') { return; } loading = false; }); return () => { controller.abort(); }; }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Effect Lifecycle Isolation and Mutation Purity

Svelte 5 Runes Effect Lifecycle Isolation and Mutation Purity defines an industrial-grade behavioral standard for frontend engineering. Enforces architectural boundaries for Svelte 5 runes ($effect, $effect.pre, $derived, $state) to eliminate infinite reactive invalidation loops, memory leaks, and race conditions. Mandates pure synchronous derivation via $derived, selective reactive dependency isolation with untrack(), and mandatory disposal teardown closures for all ambient allocations. 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: Synchronous State Mutation and Untracked Side-Effects Inside $effect Causing Cascade Render Loops and Memory Leaks 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	Synchronous State Mutation and Untracked Side-Effects Inside $effect Causing Cascade Render Loops and Memory Leaks	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 state instead of mutating $state 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.