title: How do I prevent a re-render of a large list?
body: <p>I have a 60x30 grid for a game editor and as cells are updated, a new array is created to hold the state.</p>
  
  <p>The problem is that when I update that grid array, this changes the property and it causes <code>render()</code> to recreate the grid. This seems almost obvious but then what do my options become?</p>
  
  <p>If this is overly specific, imagine just a huge list of items and you have an immutable array in which one of the items properties must change. </p>
  
  <pre><code> render() { 
      return html`
        ${this.data?.cells.map((row) =&gt; {
          return row.map((cell) =&gt; {
            return html`&lt;editor-cell .data="${cell}"&gt;&lt;/editor-cell&gt;`;
          });
        })}
      `;
    }
  
  </code></pre>
  
  <p>Coincidentally, I had the same problem on Angular with a for loop only it had <code>trackBy</code> which used the index or item.id to prevent the recreation of a list of items.  I just accepted the unicorns for that but here it is the same issue.</p>
  
  <p><strong>Question:</strong></p>
  
  <p>What am I missing about immutable states here? I totally understand why this is happening in that, its a new array and so lit element just renders what it deems a new array.  I want that, but once the grid has been rendered, I don't understand the separation between rendering and data updates. I'm either missing a key lifecycle understanding, or my approach to state is just totally whack.  </p>