From 91a42e2ed6bda52205b269d28e70b9d15cd87292 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 21 May 2026 20:25:51 +0200
Subject: [PATCH] fix: correctly coordinate component-level effects inside
 async blocks (#18260)

While looking at the reproduction in
https://github.com/sveltejs/svelte/issues/18221#issuecomment-4497918414
I immediately got greeted with a runtime error when running it in the
playground (weirdly not in the Stackblitz version). The error was that a
component expected a binding to be set in onMount, but the timing of
onMount was wrong.

Turns out it's because our logic to determine whether or not to defer
top level effects is flawed. `REACTION_RAN`, which was used previously,
is already set if the initialized component is inside an async block. We
instead check for `component_context.i` which is set to `true` on
`pop()`.
---
 .changeset/tasty-tires-wait.md                         |  5 +++++
 .../svelte/src/internal/client/reactivity/effects.js   |  7 +++++--
 .../samples/async-effect-mount-timing/Child.svelte     |  6 ++++++
 .../samples/async-effect-mount-timing/_config.js       | 10 ++++++++++
 .../samples/async-effect-mount-timing/main.svelte      |  5 +++++
 5 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/tasty-tires-wait.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-effect-mount-timing/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-effect-mount-timing/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-effect-mount-timing/main.svelte

diff --git a/.changeset/tasty-tires-wait.md b/.changeset/tasty-tires-wait.md
new file mode 100644
index 0000000000..0f3fd2d671
--- /dev/null
+++ b/.changeset/tasty-tires-wait.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly coordinate component-level effects inside async blocks
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index 5bdba037b1..1bbda86fa7 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -20,7 +20,6 @@ import {
 	EFFECT,
 	DESTROYED,
 	INERT,
-	REACTION_RAN,
 	BLOCK_EFFECT,
 	ROOT_EFFECT,
 	EFFECT_TRANSPARENT,
@@ -213,7 +212,11 @@ export function user_effect(fn) {
 	// Non-nested `$effect(...)` in a component should be deferred
 	// until the component is mounted
 	var flags = /** @type {Effect} */ (active_effect).f;
-	var defer = !active_reaction && (flags & BRANCH_EFFECT) !== 0 && (flags & REACTION_RAN) === 0;
+	var defer =
+		!active_reaction &&
+		(flags & BRANCH_EFFECT) !== 0 &&
+		component_context !== null &&
+		!component_context.i;
 
 	if (defer) {
 		// Top-level `$effect(...)` in an unmounted component — defer until mount
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-mount-timing/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-effect-mount-timing/Child.svelte
new file mode 100644
index 0000000000..18856d71e1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-mount-timing/Child.svelte
@@ -0,0 +1,6 @@
+<script>
+	let x;
+	$effect(() => console.log(!!x))
+</script>
+
+<div bind:this={x}></div>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-mount-timing/_config.js b/packages/svelte/tests/runtime-runes/samples/async-effect-mount-timing/_config.js
new file mode 100644
index 0000000000..7a6e436825
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-mount-timing/_config.js
@@ -0,0 +1,10 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	// Test that $effect/onMount etc at the top level of components are correctly deferred/coordinated if inside an async block
+	async test({ assert, logs }) {
+		await tick();
+		assert.deepEqual(logs, [true]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-mount-timing/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-effect-mount-timing/main.svelte
new file mode 100644
index 0000000000..934d9d7f5b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-mount-timing/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child foo={await 1} />