So I'm using redux and useSelector hook to get data from store.

I can filter specific data in a reducer array, so that the ponent only updates when the filtered data is changed, for example:

const images = useSelector(state => state.Reducer.images.filter(x => x.id === someID));

However, when I try the same sort of thing with an object, the ponent always re-renders even if the store hasn't even changed. e.g.:

const images = useSelector(state => Object.keys(state.Reducer.images)
  .filter(x => x === someID)
  .reduce((arr, key) => {
    arr.push(state.Reducer.images[key].data);
    return arr;
  }, []));

Why is this happening and how do I get it only to update when the data has changed? Am assuming passing some deep parison function into useSelector?

So I'm using redux and useSelector hook to get data from store.

I can filter specific data in a reducer array, so that the ponent only updates when the filtered data is changed, for example:

const images = useSelector(state => state.Reducer.images.filter(x => x.id === someID));

However, when I try the same sort of thing with an object, the ponent always re-renders even if the store hasn't even changed. e.g.:

const images = useSelector(state => Object.keys(state.Reducer.images)
  .filter(x => x === someID)
  .reduce((arr, key) => {
    arr.push(state.Reducer.images[key].data);
    return arr;
  }, []));

Why is this happening and how do I get it only to update when the data has changed? Am assuming passing some deep parison function into useSelector?

• javascript
• reactjs
• redux
• react-redux
• react-hooks

1 Answer 1

You should be able to avoid these re-renders by using shallowEqual. This will prevent the new references from being considered different all the time.

const images = useSelector(state => Object.keys(state.Reducer.images)
  .filter(x => x === someID)
  .reduce((arr, key) => {
    arr.push(state.Reducer.images[key].data);
    return arr;
  }, []), shallowEqual);

https://react-redux.js/api/hooks#equality-parisons-and-updates