title: React key on array of children versus multiple hard-coded children
body: <pre><code>const el1 = React.createElement(
    'div',
    null,
    &lt;span&gt;Hello&lt;/span&gt;,
    &lt;span&gt;World&lt;/span&gt;,
  )
  
  const el2 = React.createElement(
    'div',
    null,
    [
      &lt;span&gt;Hello&lt;/span&gt;,
      &lt;span&gt;World&lt;/span&gt;,
    ]
  )
  </code></pre>
  <p>These two statements evaluate to the same result.</p>
  <pre><code>{
    &quot;props&quot;:{
      &quot;children&quot;:[
        {
          &quot;type&quot;:&quot;span&quot;,
          &quot;key&quot;:null,
          &quot;props&quot;:{
            &quot;children&quot;:&quot;Hello&quot;
          },
        },
        {
          &quot;type&quot;:&quot;span&quot;,
          &quot;key&quot;:null,
          &quot;props&quot;:{
            &quot;children&quot;:&quot;World&quot;
          },
        }
      ]
    },
  }
  </code></pre>
  <p>Why the second form will raise &quot;Warning: Each child in a list should have a unique &quot;key&quot; prop.&quot;,
  but the first form do not ?</p>
  <h1>Update #1: Thanks Dennis Vash inspired me.</h1>
  <p>I did this experiment.
  When I toggle something in this hard-coded form,</p>
  <pre><code>&lt;div&gt;
    &lt;span&gt;Hello&lt;/span&gt;
    {error ? &lt;span&gt;error&lt;/span&gt; : null}
    &lt;span&gt;World&lt;/span&gt;
    {error ? &lt;span&gt;error&lt;/span&gt; : &lt;a&gt;error&lt;/a&gt;}
    &lt;span&gt;!&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  <p>even something is removed from the DOM, even tag is changed. React still can sync with the DOM in minimial update.
  In this hard-coded form, each individual children will be placed in the final children array in the same order. No matter how the state change, it is impossible to produce children array in different length or different order.</p>
  <p>In the array form of children, if I toggle between these two array,</p>
  <pre><code>[
    &lt;span&gt;Hello&lt;/span&gt;,
    &lt;a&gt;error&lt;/a&gt;,
    &lt;span&gt;World&lt;/span&gt;,
    &lt;span&gt;error&lt;/span&gt;,
    &lt;span&gt;!&lt;/span&gt;,
  ]
  [
    &lt;span&gt;Hello&lt;/span&gt;,
    &lt;span&gt;World&lt;/span&gt;,
    &lt;span&gt;!&lt;/span&gt;,
  [
  </code></pre>
  <p>React cannot sync with the DOM in minimial update. Because the resulting children array has different length, without key, it is not possible to write a algorithm that can safely calculate the minimial DOM update and also fast enough in practical use, so it re-render anything that is uncertain.</p>
  <p>Is that the correct reason?</p>