title: Reconciling a tree view with React
body: <p>I'm implementing a tree view in React.  The tree view has a drag and drop ability where a node can be moved around and between parents.</p>
  
  <p>With that in mind, when React reconciles my component tree from:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;TreeNode key="item1"&gt;
      &lt;TreeNode key="item2"/&gt;
      &lt;TreeNode key="item3"/&gt;
      &lt;TreeNode key="item4"/&gt;
  &lt;/TreeNode&gt;
  </code></pre>
  
  <p>To something like this:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;TreeNode key="item1"&gt;
      &lt;TreeNode key="item2"/&gt;
      &lt;TreeNode key="item3"/&gt;
  &lt;/TreeNode&gt;
  &lt;TreeNode key="item4"/&gt;
  </code></pre>
  
  <p>Will it preserve <code>item4</code> (i.e. not unmount and remount it)?  Is there some way I can force it to keep that component intact while moving it to a new parent or does React only consider <code>key</code>s when it's reconciling siblings?</p>