Skip to content

Svelte 5: legacy $: behaves differently #15251

Open
@zeroberry

Description

@zeroberry

Describe the bug

In Svelte 5 legacy reactive $: also runs before onMount if its dependency state is updated in the child component initialization. (via default value or assignment)
I think relying on this behavior is a bad practice, but it could be a breaking change.

<script>
	import { onMount } from 'svelte'
	import Component from "./Component.svelte"
	
	let foo;

	onMount(() => {
		foo = false;
	})

	$: if (foo) {
		// This now runs in svelte 5
		console.log('reactive: ', foo);
	}
</script>

<Component bind:foo />
<!-- Component.svelte -->
<script>
	export let foo = true;
</script>

Reproduction

Same code in Svelte 4 and Svelte 5 playgrounds:

Logs

System Info

-

Severity

blocking an upgrade

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions