При каких условиях useSelector вызовит Selector

Условия вызова Selector в useSelector

Функция селектор, переданная в хук useSelector из библиотеки React-Redux, вызывается при определенных условиях, связанных с изменением состояния Redux store и оптимизациями React. Понимание этих условий критически важно для написания производительных React-приложений.

Основные условия вызова селектора

1. Первоначальный рендер компонента
   При первом вызове useSelector в компоненте селектор выполняется обязательно, чтобы получить начальное значение для подписки. Это происходит при монтировании компонента.

   const count = useSelector((state) => state.counter.value);
   // Селектор вызовется при первом рендере
   

2. Изменение ссылки на результат селектора
   При каждом диспетчеризации действия (dispatch) в Redux store, React-Redux запускает все подключенные селекторы, но результат сравнивается по ссылке (===) с предыдущим значением. Если ссылка изменилась, компонент будет перерендерен. Если ссылка осталась прежней, перерендер не происходит. Это поведение по умолчанию.

   // Пример: селектор вернет новую ссылку только если изменился `state.counter`
   const counterData = useSelector((state) => state.counter);
   

3. Изменение всего состояния Redux
   Любое обновление store (даже в несвязанной части состояния) приводит к запуску всех селекторов в компонентах, использующих useSelector. Однако, как указано выше, перерендер происходит только если изменился результат конкретного селектора.

Ключевые моменты и оптимизации

• Сравнение по ссылке: Если селектор возвращает примитив (число, строку, булево значение), то сравнение происходит по значению. Для объектов и массивов — строго по ссылке. Это значит, что создание нового объекта в селекторе при каждом вызове приведет к "ложным" перерендерам.

  // ПЛОХО: создает новый массив при каждом вызове -> лишние перерендеры
  const badSelector = (state) => state.todos.map(todo => todo.text);
  
  // ХОРОШО: используем мемоизацию, например, с помощью `createSelector` из Reselect
  import { createSelector } from '@reduxjs/toolkit';
  const selectTodos = (state) => \*Продолжение во втором блоке кода*\
  

  const selectTodoTexts = createSelector(
    [selectTodos],
    (todos) => todos.map(todo => todo.text)
  );
  

• Кастомная функция сравнения: useSelector принимает второй аргумент — функцию сравнения (equalityFn). Она позволяет переопределить логику сравнения предыдущего и нового результатов селектора. Если функция возвращает true, перерендер не произойдет.

  import { shallowEqual } from 'react-redux';
  
  // Используем shallowEqual для поверхностного сравнения объекта
  const userData = useSelector(
    (state) => ({ name: state.user.name, age: state.user.age }),
    shallowEqual
  );
  

• Множественные селекторы в одном компоненте: Каждый вызов useSelector создает независимую подписку на store. Если в компоненте несколько useSelector, и изменилась только часть состояния, связанная с одним из них, то вызовутся все селекторы, но перерендерится компонент только если хотя бы один из них вернул новое значение.

Практические рекомендации

• Используйте мемоизированные селекторы (например, с библиотекой Reselect) для сложных вычислений, чтобы избежать повторных вычислений и лишних перерендеров.
• Избегайте создания новых объектов/массивов в селекторе, если данные не изменились. В случае необходимости используйте shallowEqual или кастомную функцию сравнения.
• Помните, что селектор вызывается при каждом изменении store, но это не всегда ведет к перерендеру компонента. Оптимизация заключается в минимизации именно перерендеров.
• В функциональных компонентах учитывайте, что сам селектор должен быть стабильной ссылкой, чтобы не вызывать лишние пересчеты. Определяйте его вне компонента или используйте useCallback, если он зависит от пропсов.

Таким образом, useSelector вызывает переданный селектор при первом рендере и после каждого обновления Redux store, но ререндерит компонент только когда результат селектора изменился согласно правилам сравнения (по умолчанию — сравнение по ссылке). Грамотное управление этими условиями — залог производительности Redux-приложений.