better approach

Author: trueadm

.changeset/khaki-carrots-mix.md

@@ -2,4 +2,4 @@
 'svelte': patch
 ---
 
-fix: ensure derived props cache last value when destroyed
+fix: ensure child effects are destroyed before their deriveds

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

@@ -437,8 +437,8 @@ export function destroy_effect(effect, remove_dom = true) {
 		removed = true;
 	}
 
-	destroy_effect_deriveds(effect);
 	destroy_effect_children(effect, remove_dom && !removed);
+	destroy_effect_deriveds(effect);
 	remove_reactions(effect, 0);
 	set_signal_status(effect, DESTROYED);
 

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

@@ -313,42 +313,25 @@ export function prop(props, key, flags, fallback) {
 
 	/** @type {() => V} */
 	var getter;
-	var legacy_parent = props.$$legacy;
-	// Svelte 4 did not trigger updates when a primitive value was updated to the same value.
-	// Replicate that behavior through using a derived
-	var derived_getter = with_parent_branch(() => {
-		return ((!runes && immutable) || (runes && !legacy_parent) ? derived : derived_safe_equal)(
-			() => /** @type {V} */ (props[key])
-		);
-	});
-	// Connect the derived getter to the parent branch effect
-	get(derived_getter);
-	/** @type {V} */
-	var last_value;
-
 	if (runes) {
 		getter = () => {
-			// If the derived has been destroyed, use the last value we have
-			if ((derived_getter.f & DESTROYED) !== 0) {
-				return last_value;
-			}
-			var value = get(derived_getter);
-			if (value === undefined) return (last_value = get_fallback());
+			var value = /** @type {V} */ (props[key]);
+			if (value === undefined) return get_fallback();
 			fallback_dirty = true;
 			fallback_used = false;
-			last_value = value;
 			return value;
 		};
 	} else {
+		// Svelte 4 did not trigger updates when a primitive value was updated to the same value.
+		// Replicate that behavior through using a derived
+		var derived_getter = with_parent_branch(() =>
+			(immutable ? derived : derived_safe_equal)(() => /** @type {V} */ (props[key]))
+		);
 		derived_getter.f |= LEGACY_DERIVED_PROP;
 		getter = () => {
-			// If the derived has been destroyed, use the last value we have
-			if ((derived_getter.f & DESTROYED) !== 0) {
-				return last_value;
-			}
 			var value = get(derived_getter);
 			if (value !== undefined) fallback_value = /** @type {V} */ (undefined);
-			return (last_value = value === undefined ? fallback_value : value);
+			return value === undefined ? fallback_value : value;
 		};
 	}
 
@@ -360,6 +343,7 @@ export function prop(props, key, flags, fallback) {
 	// intermediate mode — prop is written to, but the parent component had
 	// `bind:foo` which means we can just call `$$props.foo = value` directly
 	if (setter) {
+		var legacy_parent = props.$$legacy;
 		return function (/** @type {any} */ value, /** @type {boolean} */ mutation) {
 			if (arguments.length > 0) {
 				// We don't want to notify if the value was mutated and the parent is in runes mode.

packages/svelte/tests/runtime-runes/samples/props-reactive-destroy/Child.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { onDestroy } from 'svelte';
+
+	const { data = 123 } = $props();
+
+	onDestroy(() => {
+		data;
+	});
+</script>
+
+{data ? '' : null}

packages/svelte/tests/runtime-runes/samples/props-reactive-destroy/_config.js

@@ -0,0 +1,10 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, logs, target }) {
+		target.querySelector('button')?.click();
+		flushSync();
+		assert.deepEqual(logs, ['should fire once']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/props-reactive-destroy/main.svelte

@@ -0,0 +1,17 @@
+<script>
+	import Child from './Child.svelte';
+
+	let active = $state(true);
+	let data = $state({ example: 'This is some example data' });
+
+	function log(data) {
+		console.log('should fire once');
+		return data;
+	}
+</script>
+
+<button onclick={() => (active = false)}>Hide</button>
+
+{#if active}
+	<Child data={log(data)} />
+{/if}