title: How to improve render performance of component in React?
body: <p>I am new to reactJS, I should create a tree component to load data with static data or dynamic data, any way, I want to make it transparent for users, that is to say, user just support the data and the tree component is responsilbe to translate the data to tree node data.</p>
  
  <p>data user support:</p>
  
  <pre><code>[{
    id:1,
    name:'Node 1'
  },
  {
    id:2,
    name:'Node 2'
  }]
  </code></pre>
  
  <p>the data tree component translated:</p>
  
  <pre><code>[{
    key:1,
    nodeText:'Node 1',
    selected:true
   },
   {
    key:2,
    nodeText:'Node 2',
    selected:false
  }]
  </code></pre>
  
  <p>user may change the tree data some time, so I should translate again and again in the render function. </p>
  
  <pre><code>class Tree{
    render(){
       // execute the translation between data user supported to node data
       this.translateData();
  
       // logic to create nodes.
       return '&lt;ul&gt;node element&lt;/ul&gt;';
    }
  }
  </code></pre>
  
  <p>It is terrible to execute the translation many times. Actually there are some workround to avoid this:
  (1) expose the refs and define a reload function and call it by refs.</p>
  
  <p>(2) with the 'shouldComponentUpdate', but there are many tree node data, the selected, the checkable also should re-render the tree, it is complicate to control in this function.</p>
  
  <p>(3) make the tree more simple to just show the tree node data, the translation should be done by the user, not the tree itsself. but I want make the tree rich features to handles this case.</p>
  
  <p>It is precisely because user can support it any time, it become comlicate. If user only support at initialization, it will just process it in constructor or componentDidMount(). but due to the data change, it is difficult to refresh or force reload. I also want reload it with refs, it is unrecommended.</p>
  
  <p>So if anyone encounter this scenarios, please support some advices or solutions?</p>