Reactive statements triggered too often
Given the following component:
<script>
import Nested from './Nested.svelte';
let value = {'a':43};
$: console.log('value', value);
</script>
<Nested bind:answer={value}/>
and Nested.svelte
:
<script>
export let answer;
$: console.log('answer', answer);
</script>
<p>The answer is {answer}</p>
I'm getting the following console output:
value Object { a: 43 }
answer Object { a: 43 }
value Object { a: 43 }
value Object { a: 43 }
answer Object { a: 43 }
I would have expected only the first two lines, as the value is never re-assigned. If I set value
to a string or number (e.g. let value = 43;
) the behaviour is as expected and I get:
value 43
answer 43
Why are the reactive satements executed multiple times if the value is an object? Why is it ivoked more often in the outer component?