Svelte 5 Runes $effect Lifecycle and Memory Isolation Standards

--- description: Svelte 5 Runes $effect Lifecycle and Memory Isolation Standards - Enforces strict boundary constraints and deterministic microtask execution for Svelte 5 $effect, $effect.pre, and $effect.root runes. Eliminates cyclic signal cascading, unmanaged listener memory leaks, and improper synchronization across fine-grained universal reactivity trees. Mandates explicit untracking of non-dependent state reads and strict teardown semantics. 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-lifecycle-isolation" --- # Svelte 5 Runes $effect Lifecycle and Memory Isolation Standards > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Cyclic Signal Updates and Leaked Subscriptions via Implicitly Tracked Side-Effects in Svelte 5 Runes ## System Constraints You are a Principal Software Architect enforcing Svelte 5 Runes ($effect, $effect.pre, $effect.root) lifecycle and memory isolation standards. You must ensure developers do not introduce infinite reactive loops, synchronize state improperly instead of using derived state, or retain dangling subscriptions across dynamic fine-grained graph branches. Enforce untrack() for auxiliary reads and mandate absolute cleanup encapsulation. ## Strict Guidelines - Engineers MUST ALWAYS return an explicit teardown function from `$effect` whenever setting up event listeners, Timers, Observers, or external pub/sub channels. - Engineers MUST NOT write to reactive signals (`$state`) inside an `$effect` if that state can be expressed as a `$derived` calculation or computed selector. - Engineers MUST ALWAYS wrap reads of non-triggering reactive values inside `untrack(() => ...)` when referencing them alongside tracked dependencies inside an `$effect`. - Engineers MUST NEVER invoke `$effect.root()` without retaining and calling its returned disposal handle during the owning context's teardown phase. - Engineers MUST NOT use `$effect` or `$effect.pre` during Server-Side Rendering (SSR); `$effect` runs exclusively in the browser microtask schedule. - Engineers MUST use `$effect.pre` exclusively for DOM measurements or modifications prior to browser paint that depend on updated state before child components mount. ## Bad vs Good Implementations ### Unbounded Signal Mutation vs Derived Calculation & Cleanup Isolation #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Writing to `doubled` and `status` inside `$effect` triggers recursive fine-grained microtask re-evaluations. Furthermore, adding an event listener inside `$effect` without returning a teardown function creates a memory leak on every reactive execution. ```typescript import { untrack } from 'svelte'; // ANTI-PATTERN: Mutating state inside $effect, missing teardowns, implicit dependency loops let count = $state(0); let doubled = $state(0); let status = $state('idle'); $effect(() => { // Invariant Violation: Mutating signal inside effect causing cascading renders doubled = count * 2; // Invariant Violation: Implicitly tracks status while performing external synchronization if (count > 10 && status !== 'active') { status = 'active'; } // Invariant Violation: Dangling event listener leak across re-runs window.addEventListener('resize', () => { console.log('Window resized with count:', count); }); }); ``` #### Production Standard (Correct) > **Standard**: Derived state replaces redundant signal writes. Event listeners register matching teardowns returned from the effect. Untracked reads decouple auxiliary signal references from the dependency registration graph. ```typescript import { untrack } from 'svelte'; // PRODUCTION INVARIANT: Use $derived for dependent state, explicit cleanup, and untrack() for side reads let count = $state(0); const doubled = $derived(count * 2); let status = $state('idle'); $effect(() => { // Invariant: Non-triggering state inspected safely via untrack const currentStatus = untrack(() => status); if (count > 10 && currentStatus !== 'active') { status = 'active'; } // Invariant: External side-effect with guaranteed teardown closure const handleResize = () => { console.log('Window resized with count snapshot:', untrack(() => count)); }; window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); }; }); ``` ### Independent Reactive Trees via $effect.root Management #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: The `$effect.root` is instantiated without exposing its disposal callback. Memory and network intervals remain active indefinitely when caller components unmount. ```typescript // ANTI-PATTERN: Leaking decoupled reactive scope outside component lifecycle export function createExternalPolling(url: string) { let data = $state(null); // Invariant Violation: Uncontained root effect that cannot be disposed by consumer $effect.root(() => { $effect(() => { const interval = setInterval(() => { fetch(url).then(r => r.json()).then(d => { data = d; }); }, 5000); return () => clearInterval(interval); }); }); return { get data() { return data; } }; } ``` #### Production Standard (Correct) > **Standard**: The cleanup function returned by `$effect.root()` is retained and exposed via `destroy`, allowing consumers or component lifecycle handlers (e.g. `onDestroy`) to cleanly disengage the reactive sub-graph and abort in-flight requests. ```typescript // PRODUCTION INVARIANT: Manageable and disengageable $effect.root architecture export function createExternalPolling(url: string) { let data = $state<unknown>(null); // Invariant: Retain cleanup function from $effect.root and surface teardown interface const cleanup = $effect.root(() => { $effect(() => { const controller = new AbortController(); const interval = setInterval(async () => { try { const response = await fetch(url, { signal: controller.signal }); data = await response.json(); } catch (err: unknown) { if ((err as Error).name !== 'AbortError') throw err; } }, 5000); return () => { clearInterval(interval); controller.abort(); }; }); }); return { get data() { return data; }, destroy: cleanup }; } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes $effect Lifecycle and Memory Isolation Standards

Svelte 5 Runes $effect Lifecycle and Memory Isolation Standards defines an industrial-grade behavioral standard for frontend engineering. Enforces strict boundary constraints and deterministic microtask execution for Svelte 5 $effect, $effect.pre, and $effect.root runes. Eliminates cyclic signal cascading, unmanaged listener memory leaks, and improper synchronization across fine-grained universal reactivity trees. Mandates explicit untracking of non-dependent state reads and strict teardown semantics. 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 Updates and Leaked Subscriptions via Implicitly Tracked Side-Effects in Svelte 5 Runes 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 Updates and Leaked Subscriptions via Implicitly Tracked Side-Effects in Svelte 5 Runes	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 return an explicit teardown function from `$effect` whenever setting up event listeners, Timers, Observers, or external pub/sub channels.

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.