title: In Svelte, you can use `array = array` to mark the array as needing a refresh in the view?
body: <p>That is, using</p>
  
  <pre><code>array = array;
  </code></pre>
  
  <p>to trigger the view to refresh with the current <code>array</code>?</p>
  
  <p>For example, the following uses</p>
  
  <pre><code>cards = [...cards, {name}];
  </code></pre>
  
  <p>to "add" an entry to the array <code>cards</code>, but by assigning <code>cards</code> to a new array, and <code>cards</code> in the view will be refreshed.</p>
  
  <p>sample on: <a href="https://svelte.dev/repl/3ed20e7bac2e4b65944c98485d9217b3?version=3.18.1" rel="nofollow noreferrer">https://svelte.dev/repl/3ed20e7bac2e4b65944c98485d9217b3?version=3.18.1</a><br>
  (just type in some names and the list below will update).</p>
  
  <p>However, this is O(n²) when entering <code>n</code> names, because each time, the creation of a new array is O(n). If (1) the user is expected to enter a few or a dozen name at a time, it is not such a big problem, or (2) the user may type a name for a few seconds up to 20 seconds, then any delay of the UI for 0.2 seconds isn't a big problem when the entry is up to 1000 or 2000 names. (the user probably will be better to add to the server and database just in case of power outage anyways.)</p>
  
  <p>But in case we don't want the O(n²) time, we could also use:</p>
  
  <pre><code>    cards.push({name});
      cards = cards;
  </code></pre>
  
  <p>this will trigger a refresh in the view. So Svelte doesn't do "dirty checking"?  Is it true that compared to Angular, Vue, and React, they do dirty checking by actually converting the array to a string and check whether the array has changed?</p>
  
  <p>sample: <a href="https://svelte.dev/repl/70cc3b08f6864ef387c691b8f126a7fd?version=3.18.1" rel="nofollow noreferrer">https://svelte.dev/repl/70cc3b08f6864ef387c691b8f126a7fd?version=3.18.1</a></p>
  
  <p>Without the line <code>cards = cards;</code>, the list won't get updated in the view:</p>
  
  <p>sample: <a href="https://svelte.dev/repl/25f41c51798d425e805fb4586a843363?version=3.18.1" rel="nofollow noreferrer">https://svelte.dev/repl/25f41c51798d425e805fb4586a843363?version=3.18.1</a></p>
  
  <p>So Svelte doesn't do actually dirty checking but use the <code>cards = something;</code> as a hint that <code>cards</code> has changed, even by <code>cards = cards</code>? So can we just use this as a general technique to mark something as dirty if we use <code>array.push()</code> so that the program can run faster? Could Svelte actually guess that <code>cards</code> has changed by detecting there is a <code>cards.push()</code> statement?</p>
  
  <p><strong>Update: it was found that by adding a key to each list item, <code>cards = cards</code> is not needed, and I am wondering why:</strong></p>
  
  <p><a href="https://svelte.dev/repl/d78158ae54684bf28b8c2e9b527f1915?version=3.18.1" rel="nofollow noreferrer">https://svelte.dev/repl/d78158ae54684bf28b8c2e9b527f1915?version=3.18.1</a></p>
  
  <pre><code>&lt;ul&gt;
    {#each cards as card, i (i)}
      &lt;li&gt;{card.name}&lt;/li&gt;
    {/each}
  &lt;/ul&gt;
  </code></pre>