Как предотвратить повторный рендеринг компонента при использовании приращения / повторного выбора?

Question

Я получаю частые обновления моего состояния, и это вызывает некоторые нежелательные повторные визуализации в компонентах, которые не имеют доступа к изменяющимся свойствам состояния.

Компоненты A и B создаются одинаково, компонент A имеет значениеKeys ['speed', 'time'], а компонент B не имеет значенияKeys [].

Когда скорость и время обновляются, к каждому массиву добавляется еще одно значение, компонент A перерисовывается, как и ожидалось, но компонент B также перерисовывается.

Я думаю, что это происходит из-за того, что значение valuesSelector для ссылки makeValuesSelector меняется? Хотя значение является пустым массивом.

Есть ли способ предотвратить повторный рендеринг компонента B в этом сценарии?

Состояние

{
 speed: [ 5, 4, 6],
 time: [ 1, 2, 3]
}

ValueKeys

[ 'speed', 'time']

Селектор

const valuesSelector = state => state.values;
const keysSelector= (state, props) => props.valueKeys;

const makeValuesSelector = () =>
  createSelector(
    [valuesSelector, keysSelector],
    (values, keys) => {
      let usedValues = {};
      keys.forEach(key => {
        if (values[key]) {
          usedValues[key] = values[key];
        }
      });
      return usedValues;
    }
  );

Компонент

const makeMapStateToProps = () => {
  const valuesSelector = makeValuesSelector();
  const mapStateToProps = (state, props) => ({
    values: valuesSelector(state, props),
  });
  return mapStateToProps;
};