title: Why Svelte component updated variable, where in reality it didn't changed?
body: <p>The listener for <code>state</code> variable in <code>App</code> component, will print two messages, as if the <code>state</code> variable has been changed.</p>
  <p>But in reality the <code>state</code> didn't changed, and the listener should be called only once, printing message only once.</p>
  <p>By listener I mean reactive block of code with console printing.</p>
  <pre class="lang-svelte prettyprint-override"><code>$: { i += 1; console.log(i, state) }
  </code></pre>
  <p>Why Svelte calls listener twice? And how to avoid it? It seems like it's somehow related to <code>bind</code>.</p>
  <p><a href="https://svelte.dev/repl/3320557e7d434dc48bff8ef2c6fec153?version=3.38.2" rel="nofollow noreferrer">demo</a></p>
  <p>App.svelte</p>
  <pre class="lang-svelte prettyprint-override"><code>&lt;script&gt;
      import Some from &quot;./Some.svelte&quot;
      let state = { v: 0 }
      
      let i = 0
      $: { i += 1; console.log(i, state) }
  &lt;/script&gt;
  
  &lt;Some bind:state={state}/&gt;
  </code></pre>
  <p>Some.svelte</p>
  <pre class="lang-svelte prettyprint-override"><code>&lt;script&gt;
      export let state
  &lt;/script&gt;
  
  &lt;div&gt;
      v = {state.v}
  &lt;/div&gt;
  </code></pre>
  <p>Console output</p>
  <pre><code>1 Object { v: 0 }
  2 Object { v: 0 }
  </code></pre>