title: React keys in dynamic lists
body: <p>This is from the Facebook documentation:</p>
  
  <blockquote>
    <p>When a list is rerendered, React takes each element in the new version
    and looks for one with a matching key in the previous list. When a key
    is added to the set, a component is created; when a key is removed, a
    component is destroyed. Keys tell React about the identity of each
    component, so that it can maintain the state across rerenders. If you
    change the key of a component, it will be completely destroyed and
    recreated with a new state.</p>
    
    <p>It's strongly recommended that you assign proper keys whenever you
    build dynamic lists. If you don't have an appropriate key handy, you
    may want to consider restructuring your data so that you do.</p>
    
    <p>If you don't specify any key, React will warn you and fall back to
    using the array index as a key – which is not the correct choice if
    you ever reorder elements in the list or add/remove items anywhere but
    the bottom of the list. Explicitly passing key={i} silences the
    warning but has the same problem so isn't recommended in most cases.</p>
    
    <p>Component keys don't need to be globally unique, only unique relative
    to the immediate siblings.</p>
  </blockquote>
  
  <p>I don't get it. If we don't supply keys in a list like this:</p>
  
  <pre><code>return (
          &lt;li&gt;
            &lt;a href="#" onClick={() =&gt; this.jumpTo(move)}&gt;{desc}&lt;/a&gt;
          &lt;/li&gt;
        );
  </code></pre>
  
  <p>What is the problem? If the list had 3 elements and the keys were <code>[0,1,2]</code> and we removed <code>1</code>, what would happen?</p>