How to manage state in a tree component in reactjs


I've been struggling this for a couple of days, trying to figure out the "react" way to do it.

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.

Here's my data:

var data = [{
      id: 1
    }, {
      id: 2, children: [
          id: 3, children: [{id: 6}]
        }, {
          id: 4
        }, {
          id: 5

My first pass was to just have a single "tree" component that builds the nested lists of DOM elements in its render function (look at the code here). 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).

So I think I'll have each "node" of the tree be it's own instance of this component. But here's my question (sorry for the long intro):

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?

I'm still trying to wrap my mind around how state & props should be handled & divvied up.



Here is a quick example of how to create a treeview using React and Flux.

The React component is recursive and state is managed using Flux.

By : TGH

This video can help you solving your question :)
By: admin