title: How to manage state in a tree component in reactjs
body: <p>I've been struggling this for a couple of days, trying to figure out the "react" way to do it.</p>
  
  <p>Basically, I have a tree, a list of lists (of lists ...) that can be arbitrarily nested, and I want a component that will display this and also enable rearrangement.</p>
  
  <p>Here's my data:</p>
  
  <pre><code>var data = [{
        id: 1
      }, {
        id: 2, children: [
          {
            id: 3, children: [{id: 6}]
          }, {
            id: 4
          }, {
            id: 5
          }]
      }]
  </code></pre>
  
  <p>My first pass was to just have a single "tree" component that builds the nested lists of DOM elements in its render function (<a href="https://github.com/notablemind/tree/blob/fa9cd0af481204aef36ab89d162cc03dd1dbc8b1/index.jsx#L96">look at the code here</a>). That actually worked pretty well for small numbers of elements, but I want to be able to support hundreds of elements, and there was a very high re-render cost when an element was moved within the tree (~600ms when there were a few hundred elements).</p>
  
  <p>So I think I'll have each "node" of the tree be it's own instance of this component. But <strong>here's my question (sorry for the long intro):</strong></p>
  
  <p>Should each node dynamically query for the list it's children's IDs from a central "database" and store that in state? Or should the top-most node load the whole tree and pass everything down through props?</p>
  
  <p>I'm still trying to wrap my mind around how state &amp; props should be handled &amp; divvied up.</p>
  
  <p>Thanks</p>