fix: ensure component root effect updates occur first

.changeset/kind-schools-share.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure component root effect updates occur first

packages/svelte/src/internal/client/reactivity/effects.js

@@ -32,7 +32,8 @@ import {
 	HEAD_EFFECT,
 	MAYBE_DIRTY,
 	EFFECT_HAS_DERIVED,
-	BOUNDARY_EFFECT
+	BOUNDARY_EFFECT,
+	DISCONNECTED
 } from '../constants.js';
 import { set } from './sources.js';
 import * as e from '../errors.js';
@@ -229,7 +230,7 @@ export function inspect_effect(fn) {
  * @returns {() => void}
  */
 export function effect_root(fn) {
-	const effect = create_effect(ROOT_EFFECT, fn, true);
+	const effect = create_effect(ROOT_EFFECT | DISCONNECTED, fn, true);
 
 	return () => {
 		destroy_effect(effect);

packages/svelte/src/internal/client/runtime.js

@@ -738,7 +738,14 @@ export function schedule_effect(signal) {
 		}
 	}
 
-	queued_root_effects.push(effect);
+	// Schedule the root effect for component trees first so any updates
+	// that affect the component tree occur first. Root effects that are
+	// not for component trees (i.e. $effect.root) will be marked as disconnected
+	if ((effect.f & DISCONNECTED) === 0) {
+		queued_root_effects.unshift(effect);
+	} else {
+		queued_root_effects.push(effect);
+	}
 }
 
 /**