Deterministic Hydration Boundaries and Effect Teardowns in Svelte 5 Runes

--- description: Deterministic Hydration Boundaries and Effect Teardowns in Svelte 5 Runes - Enforces synchronous effect cleanup registration and strict asynchronous signal tracking boundaries within Svelte 5 reactive graphs during SSR streaming and client hydration. Prevents memory leaks, uncollected reactive scopes, and microtask cascade loops caused by async effects returning Promises rather than deterministic teardown functions. 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-hydration-boundary-guardrail" --- # Deterministic Hydration Boundaries and Effect Teardowns in Svelte 5 Runes > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Asynchronous Effect Initialization Bypassing Synchronous Teardown and Leaking Reactive Signal Graphs ## System Constraints You are a Principal Software Architect enforcing Svelte 5 fine-grained reactive invariants. You must prevent memory leaks and microtask cascade loops during SSR streaming hydration by ensuring $effect rune blocks are strictly synchronous, provide explicit teardown closures, isolate async operations with AbortController boundaries, and never mutate reactive signals after component unmount. ## Strict Guidelines - Engineers MUST ALWAYS return a synchronous teardown function from `$effect` and `$effect.pre` runes when spawning asynchronous microtasks, timers, or event listeners. - Engineers MUST NOT pass an `async` function directly to `$effect` or `$effect.pre`, as an async callback returns a `Promise<void>` instead of the required teardown function, permanently disabling Svelte's cleanup orchestration. - Code SHOULD bind asynchronous operations within `$effect` to an `AbortController` whose `.abort()` method is invoked in the synchronous teardown return closure. - Services MUST wrap independent reactive subgraphs created outside normal component lifecycles in `$effect.root()` and maintain explicit references to call the returned disposal function upon unmount or stream termination. - Components NEVER mutate reactive `$state` or trigger reactive dependencies after an asynchronous yield (`await`) without validating that the containing scope remains active and has not been aborted or unmounted. ## Bad vs Good Implementations ### Async Effect Anti-Pattern vs. Deterministic Synchronous Abort Boundary #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Passing an async function to `$effect` yields a Promise that Svelte cannot invoke for teardown. When `streamId` updates rapidly or when an SSR streaming chunk suspends/aborts, the previous unresolved fetch continues in the background, writing to `$state` after scope invalidation and generating orphan microtask loops. ```typescript import { untrack } from 'svelte'; // ANTI-PATTERN: Passing an async function to $effect. // Svelte receives a Promise, NOT a cleanup function, leaking memory and microtasks // if the component unmounts or re-evaluates during streaming hydration. let streamId = $state(1); let streamData = $state<string | null>(null); $effect(async () => { const response = await fetch(`/api/stream/${streamId}`); const result = await response.json(); // Unhandled mutation after async yield during unmount causes hydration mismatch cascade streamData = result.payload; }); ``` #### Production Standard (Correct) > **Standard**: The `$effect` executes synchronously, capturing `streamId` as a tracked signal and returning a synchronous teardown closure. When dependencies invalidate or when the component unmounts during hydration, `controller.abort()` terminates the in-flight network request, preventing post-unmount signal mutation and microtask thrashing. ```typescript import { untrack } from 'svelte'; // PRODUCTION FIX: Synchronous $effect returning a deterministic teardown function, // wrapping async logic with AbortController and handling lifecycle boundaries. let streamId = $state(1); let streamData = $state<string | null>(null); $effect(() => { const controller = new AbortController(); const currentId = streamId; // synchronously tracked dependency (async () => { try { const response = await fetch(`/api/stream/${currentId}`, { signal: controller.signal }); if (!response.ok) throw new Error(`Stream fetch failed: ${response.statusText}`); const result = await response.json(); // Verify abort state before updating reactive signals to prevent cascade loops if (!controller.signal.aborted) { streamData = result.payload; } } catch (error: unknown) { if (error instanceof DOMException && error.name === 'AbortError') { return; } throw error; } })(); // Explicit synchronous cleanup hook return () => { controller.abort(); }; }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Deterministic Hydration Boundaries and Effect Teardowns in Svelte 5 Runes

Deterministic Hydration Boundaries and Effect Teardowns in Svelte 5 Runes defines an industrial-grade behavioral standard for frontend engineering. Enforces synchronous effect cleanup registration and strict asynchronous signal tracking boundaries within Svelte 5 reactive graphs during SSR streaming and client hydration. Prevents memory leaks, uncollected reactive scopes, and microtask cascade loops caused by async effects returning Promises rather than deterministic teardown functions. 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: Asynchronous Effect Initialization Bypassing Synchronous Teardown and Leaking Reactive Signal Graphs 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	Asynchronous Effect Initialization Bypassing Synchronous Teardown and Leaking Reactive Signal Graphs	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 a synchronous teardown function from `$effect` and `$effect.pre` runes when spawning asynchronous microtasks, timers, or event listeners.

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.