I have a store that looks like the following:

• allItems
  • item1: {uivalue1: 1, uivalue2: 2, position: {x, y}}
  • ...
• selectedItemsKeys: ['item1', 'item2']

Some of the UI components that I have need only render when ui values change and ignore position data that changes frequently but does not affect those UI components.

The problem I am having is that I am not sure how to create a selector that would not recalculate its results whenever position values change on the items.

// This is a basic selector that will always return new reference and values
const getSelectedItems = (state) =>
    getAllItems(state).subset(getSelectedItemsKeys(state));

// This is how I'd usually cache the result with `reselect` except this
// would not work since `getAllItems` will be changing frequently when
// position data changes inside one of the items.
const  getSelectedItems = createSelector(
  getAllItems,
  getSelectedItemsKeys,
  (allItems, selectedKeys) => allItems.subset(selectedKeys)
);

The structure for allItems is potentially out of my control so I would like a solution that does not involve changing where that position data is stored. Any thoughts on ways to solve this?

I've tried to work with re-reselect but it looks like it would still recalculate if one of the input selectors values change regardless if the cache key stayed the same or not. This is what I tried:

// I thought this might work, but I might be mis-understanding how re-reselect works.
// This still recalculates even though the cache keys do not change and they are in the
// cache.
const getSelectedItems = createCachedSelector(
    getAllItems,
    getSelectedItemsKeys,
    (allItems, selectedKeys) => allItems.subset(selectedKeys)
)(
    (state) => `keys-${state.selectedItemsKeys.join(':')}`
);