title: How to prevent component re-render while using redux/reselect?
body: <p>I'm receiving frequent updates to my state and its causing some unwanted re-renders in components that are not accessing the changing state properties. </p>
  
  <p>Component A and B are created in the same way, component A has the valueKeys ['speed', 'time'] and component B has no valueKeys [].</p>
  
  <p>When the speed and time are updated one more value is added to each array, component A re-renders as expected, but component B also re-renders.</p>
  
  <p>I think this is occurring because the valuesSelector input for makeValuesSelector reference is changing? Although the value is an empty array.</p>
  
  <p>Is there any way to prevent component B from re-rendering in this scenario?</p>
  
  <p>State</p>
  
  <pre><code>{
   speed: [ 5, 4, 6],
   time: [ 1, 2, 3]
  }
  </code></pre>
  
  <p>ValueKeys</p>
  
  <pre><code>[ 'speed', 'time']
  </code></pre>
  
  <p>Selector</p>
  
  <pre><code>const valuesSelector = state =&gt; state.values;
  const keysSelector= (state, props) =&gt; props.valueKeys;
  
  const makeValuesSelector = () =&gt;
    createSelector(
      [valuesSelector, keysSelector],
      (values, keys) =&gt; {
        let usedValues = {};
        keys.forEach(key =&gt; {
          if (values[key]) {
            usedValues[key] = values[key];
          }
        });
        return usedValues;
      }
    );
  </code></pre>
  
  <p>Component</p>
  
  <pre><code>const makeMapStateToProps = () =&gt; {
    const valuesSelector = makeValuesSelector();
    const mapStateToProps = (state, props) =&gt; ({
      values: valuesSelector(state, props),
    });
    return mapStateToProps;
  };
  </code></pre>