Why the checkbox doesn't work in this reactive inner object?

[frederikhors]

Describe the bug

Why is the checkbox not working here?

I think Svelte is re-evaluating innerTeam on change, but I don't understand why: I'm changing innerTeam not team.

I'm using that reactive syntax to change innterTeam only if team changes! Not the other way!

Reproduction

REPL: https://svelte.dev/repl/1ef7657adbc545a0b595e2ab58069b4a?version=3.42.4

• App.svelte:

<script>
	import {onMount} from "svelte";
	
	import Inner from "./Inner.svelte"
	
	let team = {
		player: {id: "1", name: "John"},
		full: false
	}
	
	$: console.log("team changed:", team);
	
	onMount(() => {
		setTimeout(()=> {
			team = {
				player: {id: "2", name: "Bob"}, full: false
			}
		}, 4000)
	})
</script>

team: <pre>{JSON.stringify(team, null, 2)}</pre>

<Inner {team}></Inner>

• Inner.svelte:

<script>		
	export let team = undefined;
	
	let innerTeam;
	
	$: innerTeam = {
		...team,
		cars: []
	}
	
	$: console.log("innerTeam changed:", innerTeam);
	
	function addCar() {
		innerTeam.cars = [...innerTeam.cars, {id: "1", brand: "BMW"}]
	}
</script>

<button on:click={addCar}>
	Add car to customTeam
</button>

<br>

<input bind:checked={innerTeam.full} type="checkbox"/> Full?

<br>

innerTeam: <pre>{JSON.stringify(innerTeam, null, 2)}</pre>

Additional

Here a version without Inner.svelte component: https://svelte.dev/repl/6dd87a76d59548559b75f50103980e7a?version=3.42.4.

It's the same. But if I remove the onMount() it works!

System Info

version=3.42.4

Severity

blocking all usage of svelte

[Prinzhorn]

You have two conflicting interests.

1. You have a reactive $: innerTeam = assignment and create a new object everytime the dependencies (team) change
2. You want to also manually change innerTeam.full property via the checked binding

I can't find it right now, but there is an open feature request to allow that. But the semantic would need to be defined. One possible semantic would allow you to touch innerTeam and update it manually and temporaritly, but the reactive statement would overwrite it once the dependencies change (in your example when team changes you create a new innerTeam object with full being team.full === false).

Svelte currently consistently gives the reactive statement priority over your checked binding.

Once you realize that there are two conflicting interests, you can now rethink your problem and find a different solution. I don't know what you are trying to achieve, so I can't give you that.

Edit: I think it works without the onMount because then team is basically const, which can be statically determined. This also makes your reactive innerTeam a constant expression.

[Prinzhorn]

There we go, duplicate of: #4933

Oooof, you already commented there 😄 . Please for future issues put the things you've found during your research in there 🙏

[frederikhors]

I don't think these are two different interests in contrast with each other.

I wanna update that temporary object and when the dep changes I re-create the temporary object. Simple as that.

[frederikhors]

Thanks for your answer tough, @Prinzhorn.

[Prinzhorn]

To me personally this behavior makes sense, we both seem to have a different mental model of what the given reactive statement does. And I don't see it change before a new major version. I personally think what you're doing is not "correct" (but it's just an example, not your actual code). What if you add a team.title property in the top level and bind it to a input[type=text]. Now every time you change the title your checkbox is unchecked, because innerTeam is re-created. I'd be more specific about what I want to happen.

But I think we can agree that this is a duplicate?

Edit: my mental model for this example is "here's my recipe on how to create a innerTeam object, Svelte please make sure it's always up to date". And the recipe is complete, nothing else can change the thing.

[Prinzhorn]

One more thing that might help: you don't need let innerTeam; at all, $: innerTeam = ... is enough (Svelte will handle defining the actual variable for you). Maybe this helps. Because you don't declare an innerTeam variable and then make it reactive. You declare a reactive variable and it's dependencies ("recipe"). See doubled here https://svelte.dev/tutorial/reactive-declarations

[dummdidumm]

This comes down to $: standing for two things and it's not easy to distinguish:

• side effects that happen in reaction to something
• derived state that keeps values in sync

Svelte 5 fixes this by separating these into two distinct runes, $effect and $derived. That way it's much clearer what's going on and such edge cases are avoided entirely.
In this case, you would have a $state variable and either update that through the binding of from an $effect, resulting in the desired behavior.