create separate component_root effect

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

@@ -244,11 +244,24 @@ export function inspect_effect(fn) {
 /**
  * Internal representation of `$effect.root(...)`
  * @param {() => void | (() => void)} fn
- * @returns {(options?: { outro?: boolean }) => void}
+ * @returns {() => void}
  */
 export function effect_root(fn) {
 	const effect = create_effect(ROOT_EFFECT, fn, true);
 
+	return () => {
+		destroy_effect(effect);
+	};
+}
+
+/**
+ * An effect root whose children can transition out
+ * @param {() => void} fn
+ * @returns {(options?: { outro?: boolean }) => void}
+ */
+export function component_root(fn) {
+	const effect = create_effect(ROOT_EFFECT, fn, true);
+
 	return (options = {}) => {
 		if (options.outro) {
 			pause_effect(effect, () => {

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

@@ -10,7 +10,7 @@ import {
 } from './dom/operations.js';
 import { HYDRATION_END, HYDRATION_ERROR, HYDRATION_START } from '../../constants.js';
 import { push, pop, component_context, active_effect } from './runtime.js';
-import { effect_root, branch } from './reactivity/effects.js';
+import { component_root, branch } from './reactivity/effects.js';
 import {
 	hydrate_next,
 	hydrate_node,
@@ -204,7 +204,7 @@ function _mount(Component, { target, anchor, props = {}, events, context, intro
 	// @ts-expect-error will be defined because the render effect runs synchronously
 	var component = undefined;
 
-	var unmount = effect_root(() => {
+	var unmount = component_root(() => {
 		var anchor_node = anchor ?? target.appendChild(create_text());
 
 		branch(() => {