Why ReactJs Draw the entire component when a partial state change?

Question

I have a component with 2 children.

React.createClass({
   getInitialState: function(){
      return {ch_1 : 'Child 1', ch_2: 'child_2'};
   },
   _onChange : function(e){
       var value = e.target.value;
       var id = e.target.id;
       if(id == '1'){
          this.setState({ch_1 : value});
       }
       else{
          this.setState({ch_2 : value});
       };
   },
   Render : function(){
      return React.createElement('div', {key: 10000 }, 
      React.createElement('input', {id: '1', key: 10, value: this.state.ch_1, 
            onChange: this._onChange}),
      React.createElement('input', {id: '2', key: 20, value: this.state.ch_2, 
            onChange: this._onChange}))
   }
});

when a partial state change, the entire component is drawn again. the problem is that, in my project I have a lot of children and redrawing the entire component makes my project too slow. because I have to wait for all the component to be update (I'm talking about around 2 hundreds children ).

can any one please tell me why it works like that?

thank you

possible duplicate https://stackoverflow.com/questions/33613728/what-happens-when-using-this-setstate-multiple-times-in-react-component — oklas, May 24 '17 at 08:14
You could use `shouldComponentUpdate(nextProps, nextState)` to determine whether the component should re-render. https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate — Akeel, May 24 '17 at 09:48

score 1 · Answer 1 · edited Aug 10 '20 at 19:55

Actually I have resolve it in this way. React re-render the element if its state change or it has a different key. so I have implemented a function that return for each element a unique.

React.createClass({
   customData: {
      keys: {}
   },
   getKey : function(path/*can be div-root-object-attribute-*/ , 
         elementName /*I use className*/){
        
        var numberSeparator = '###';
        var keyPrefix = 'key_' + path.replace(/ /g,'_') + '_' + 
              elementName.replace(/ /g,'_') + numberSeparator;
        
        var newNumber = this.customData.keys[keyPrefix] != null ? 
              this.customData.keys[keyPrefix] + 1 : 1;
        newKey = keyPrefix + newNumber;
        this.customData.keys[keyPrefix] = newNumber;
        
        return newKey;
    },
    render : function(){
          //important => so it will try to render again with the same 
          //keys and will skip element with unchanged state
          this.customData.keys = {};
          return React.createElement();
    }

})

score 0 · Answer 2 · answered May 24 '17 at 09:48

A state change within the component causes a re-render of the entire component and its child components within it. To optimise it, you can use the lifecycle method shouldComponentUpdate, as documented here. https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

Inside the shouldComponentUpdate method, you can re-render the component based on your own checks.

Therefore, what happens is that if the props or state of the component doesn't change, the component will not re-render unncessarily.

Why ReactJs Draw the entire component when a partial state change?

2 Answers2