reactjs - Performance issues with a tree structure and shouldComponentUpdate in React / Redux -

i'm new react, redux , immutablejs, , have run performance issues.

i have large tree structure of data, i'm storing flat list in structure:

new map({   1: new node({     id: 1,     text: 'root',     children: [2,3]   }),   2: new node({     id: 2,     text: 'child 1',     children: [4]   }),   3: new node({     id: 3,     text: 'child 2',     children: []   }),   4: new node({     id: 4,     text: 'child of child 1',     children: []   }) }); 

while structuring flat list makes updating nodes easy, i'm finding interaction gets sluggish tree grows. interaction includes being able select 1 or more nodes, toggle visibility of child nodes, update text, , on. looks key reason the sluggish ui entire tree being redrawn each interaction.

i want use shouldcomponentupdate such if update node 3, nodes 2 , 4 not update. easy if data stored tree (i check whether this.props !== nextprops), data stored in flat list check substantially more complex.

how should being storing data , using shouldcomponentupdate (or other methods) support smooth ui hundreds or thousands of tree nodes?

edit

i've been connecting store @ top level, , having pass entire store down subcomponents.

my structure is:

<nodetree>    <nodebranch>     <node>{{text}}</node>     <nodetree>...</nodetree>   </nodebranch>   <nodebranch>     <node>{{text}}</node>     <nodetree>...</nodetree>   </nodebranch>   ... </nodetree> 

the <node> can simple check shouldcomponentupdate see if title has changed, have no similar solution use on <nodetree> or <nodebranch> given recursive nature of tree.

it looks best solution (thanks @dan abramov) connect each <nodebranch>, rather connecting @ top level. i'll testing this evening.

i just added new example showing that.
can run this:

git clone https://github.com/rackt/redux.git  cd redux/examples/tree-view npm install npm start  open http://localhost:3000/