В каких случаях я могу использовать второй параметр в useSelector?

Question

[iordania]

Знаю что useSelector принимает второй необязательный параметр и хотелось бы знать в каких кейсах я могу его использовать ?

Answer 1

[Alexandroppolus]

Например, у тебя такой селектор

const selector = (state) => {
  return {
    a: state.a,
    b: state.b,
  };
};

как видим, он всегда возвращает новое значение, потому что новый объект (новая ссылка).
если селектор несколько раз подряд будет возвращать, например, {a: 1, b: 2}, то компонент, в котором вызван useSelector, будет всегда перерендериваться, так как useSelector по умолчанию сравнивает старое и новое значение по ссылке и потому считает их разными.
вторым параметром ты можешь воткнуть функцию, которая умеет сравнить объекты более "вдумчиво" и признать их одинаковыми, даже если ссылки разные:

const isEqual = (x, y) => {
  return x === y || (x.a === y.a && x.b === y.b);
};

за счет этого сможем экономить ререндеры.

можно взять готовую shallowEqual из 'react-redux', если только поверхностное сравнение, или использовать глубокое сравнение, или что-то ещё.

Comments

[iordania]

Alexandroppolus а могу применить мемоизацию или это не особо спасёт ситуацию ?

[Alexandroppolus]

iordania, ну да, можно мемоизировать селектор, создав его, например, с помощью reselect. Тогда не понадобится второй параметр в useSelector - при неизменившихся данных в редуксовом стейте, селектор сам вернет предыдущий объект.