title: Optimizing react redux component with shouldComponentUpdate
body: <p>This is my first attempt at creating something with react and redux.
  So my goal is to build a data table. (I probably could have used some existing ones, but I wanted to challange myself with this).</p>
  
  <p>The table renders rows only visible on the screen, you can show/hide/swap/pin/resize columns, and every action like this also save profile in localstorage. Rows can be filtered, edited and "checked" to do some other actions with them.
  So the component is pretty comprehensive, with lots of features.
  I have basically done it, and it works.</p>
  
  <p>But I used redux, and, by following any example online - they say "make one connected component per 'logical' component".</p>
  
  <p>So I did it - I have 1 reducer for whole table. But only now, I noticed a serious lag.</p>
  
  <p>When I try to type in "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" in 1 filter input, it hangs up pretty severely.</p>
  
  <p>The input cell is rather simple -</p>
  
  <pre><code>&lt;input ref={el =&gt; this.input = el} className="form-control" type="text" value={this.props.value} onChange={this.handleChange} /&gt;
  </code></pre>
  
  <p>And <code>handleChange()</code> dispatches this event to reducer</p>
  
  <pre><code>handleChange(evt) {
      this.props.onFilterInputChange({fieldName: this.props.fieldName, value: this.input.value});
  }
  </code></pre>
  
  <p>And the reducer is a simple one aswell</p>
  
  <pre><code>case types.ON_FILTER_INPUT_CHANGE: {
      const spec = {
          currentFilter: {
              [action.params.fieldName]: { $set: action.params.value }
          }
      };
      return update(state, spec);
  }
  </code></pre>
  
  <p>Chrome performace tool records this awful thing as this:
  <a href="https://i.stack.imgur.com/BJF3K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BJF3K.png" alt="Chrome performace tools while typing &quot;aaaaaaaaaaaaaaaaaaaaaaaaa&quot;"></a></p>
  
  <p>From examples - many said this:</p>
  
  <blockquote>
    <p>React-redux rerenders only the things that change</p>
  </blockquote>
  
  <p>But that was not true. It calls render() for all of the things in the component and that is why my table works so slow.
  I have not added <code>shouldComponentUpdate()</code> to any of my components.</p>
  
  <p>My question is: how do I make it work faster?</p>
  
  <p>Would adding this to all of my components make it better?</p>
  
  <pre><code>shouldComponentUpdate(newProps, newState) {
      let keys = Object.keys(this.props);
      let result = false;
      for (let i = 0; i &lt; keys.length; i++) {
          if (this.props[keys[i]] !== newProps[keys[i]]) {
              result = true;
              break;
          }
      }
      return result;
  }
  </code></pre>
  
  <p>It seems to make it a bit more responsive.</p>
  
  <p>But I had doubts about redux before this - storing all of the state in a single atom..</p>