The `data` prop in `+page.svelte` and `+layout.svelte` is no longer reactive after migrating to svelte 5

[sacrosanctic]

Describe the bug

• Reactive updates for local state changes are broken post-migration.
• The migration tool does not address or mention this behavioural change.
• $effect is discouraged, yet it is the only viable solution for handling updates that come from both the client and server. This is neither mentioned nor explained in the migration or core documentation.

Suggestions

• The migration CLI should flag this change and recommend solutions.
• Clarify when the use of $effect is appropriate

Step 1 - Svelte 4 Reactivity

<script>
	export let data
</script>

{data.value}

<button	on:click={() => { data.value++ }}>add one</button>

repl: https://www.sveltelab.dev/zbbk7q85vpwanc2

This is a typical reactive setup with local state update for optimistic UI.

Step 2 - Migrate to svelte 5 via npx sv migrate svelte-5

<script>
	let { data = $bindable() } = $props()
</script>

{data.value}

<button onclick={() => { data.value++ }}>add one</button>

repl: https://www.sveltelab.dev/98hgsqyo40rxg8f

The CLI replaced export let with $props, but we're no longer able to get reactive updates for data.value. $bindable() was also added for no observable effect.

Step 3 - Use $state

<script>
	let { data = $bindable() } = $props()
	let value = $state(data.value)
</script>

{value}

<button onclick={() => { value++ }}>add one</button>

repl: https://www.sveltelab.dev/4mxyw4ufpb7xd46

Local updates now work, but we're no longer able to receive updates from the server.

Step 3.1 - Use $derived

<script>
	let { data = $bindable() } = $props()
	let value = $derived(data.value)
</script>

{value}

<!-- <button onclick={() => { value++ }}>add one</button> -->

repl: https://www.sveltelab.dev/ccquv598riknpuu

Cannot assign to derived state. :|

Step 3.2 - Use $state + $effect

<script>
	let { data = $bindable() } = $props()
	let value = $state(data.value)
	$effect(() => {
		value = data.value;
	});
</script>

{value}

<button onclick={() => { value++ }}>add one</button>

repl: https://www.sveltelab.dev/pj3m9zhjahswqk2

Finally, we're able to return to the svelte 4 behaviour. This is also the solution @benmccann suggests in sveltejs/svelte#14536. But this solution is a problem, as he puts it.

why are we encouraging this? it seems so gross and feels like anti-pattern
source

On top of that step 3 and 3.1 were intuitive solutions a user will reach for, yet it is incorrect.

Severity

blocking an upgrade

Additional Information

Global State

I think there is also a high correlation between this and setting up a global state, as users often will and are encouraged to set up their data in the load fn and would like to use them in various pages. I created a second issue that addresses that in #13000.

Related discussions from maintainers

• Svelte 5: can't link reactivity from $props() svelte#14536
• https://discord.com/channels/457912077277855764/1303297143276179467
• Svelte 5: Bring back $state.link svelte#13452

Related help threads

• https://discord.com/channels/457912077277855764/1305448964044357657
• https://discord.com/channels/457912077277855764/1301813962530357248

[PatrickG]

I guess this could be fixed when Sveltekit would use $state() for the data prop.
Until then, I think I found a good solution for this.

// +page.svelte
let props = $props();

let data = $derived.by(() => {
  let state = $state(props.data);
  return state;
});

[henrykrinkle01]

While this works, it's still not intuitive, not documented and migration still breaks apps

[teemingc]

closing as duplicate of sveltejs/svelte#14536

[CaptainCodeman]

I think the trick is to return the $state you want from the load fn. It's then reactive + mutable and also doesn't require use of get/set context.

Here's a 'real-world' (ish) example:
https://github.com/CaptainCodeman/shopping-cart

(still need to do the writeup to explain the pieces)

You could also use the new class transform feature to do it directly from the server load fn.

[sacrosanctic]

<script>
	let props = $props()
	let data = $state(props.data)
	$effect(() => {
		data = props.data;
	});
</script>

A variation of 3.2 that applies to all data props.

---

sveltejs/svelte#15142 (comment)

maintainers confirmation of Patricks pattern

[sacrosanctic]

For anyone who ends up here. Writable derived is now built-in.

sveltejs/svelte#15570

[oxisto]

For anyone who ends up here. Writable derived is now built-in.

sveltejs/svelte#15570

This only solves half to he problem, since data is not nested reactive and the temporary override will only affect properties changed on the derived "data" directly, not anything "below".

[sacrosanctic]

@oxisto go here on that topic

#13626