title: ReactJS sortable dnd tree setup
body: <p>React newbie again.</p>
  
  <p>I have and admin page for a forum. It's a tree structure with potentially infinite depth, ordered by <code>order_id</code> field.
  I can get it from the api either as a tree (with a <code>children</code> array field holding the children of each node) or as a flat array with an <code>ancestry</code> (a string that holds the whole path to the node, separated by a <code>/</code>) and a <code>parent_id</code> field.
  I need to be able to move them around, expand and collapse subtrees and be able to add a node in any place.</p>
  
  <p>Now I have several questions:</p>
  
  <ol>
  <li><p>Is there a good out-of-the-box UI library to be able to drag-drop them to rearrange? I found this one: <a href="https://github.com/frontend-collective/react-sortable-tree" rel="nofollow noreferrer">https://github.com/frontend-collective/react-sortable-tree</a> but I can't get it to not have a limited height frame, and also customizing those themes looks too complicated.</p></li>
  <li><p>If I am to do it from scratch using react-dnd, what is the more efficient way of working with this tree - have it as a tree (how do I add/update the nodes?) or store it flat and build the tree on render (easy to manage the collection, but complicates rendering and sorting logic).</p></li>
  </ol>