For example, you have a selector like this
you can take a ready-made shallowEqual from 'react-redux' if only a surface comparison, or use a deep comparison or something else.
const selector = (state) => {
return {
a: state.a,
b: state.b,
};
};
as you can see, it always returns a new value because a new object (new reference). If the selector returns, for example, {a: 1, b: 2}, the component in which useSelector is called will always be re-rendered, since useSelector compares the old and new values by reference by default and therefore considers them different. second parameter, you can plug in a function that can compare objects more "thoughtfully" and recognize them as the same, even if the references are different: const isEqual = (x, y) => {
return x === y || (x.a === y.a && x.b === y.b);
};
This way we can save renders. you can take a ready-made shallowEqual from 'react-redux' if only a surface comparison, or use a deep comparison or something else.