Из-за чего происходят ререндеры React-компонента, подключённого к Redux, и как компонент узнаёт об изменении состояния?

Как Redux уведомляет компоненты

Redux хранит состояние в едином store. Когда происходит dispatch(action), редьюсер создает новый объект состояния. После этого store вызывает всех подписчиков, зарегистрированных через метод store.subscribe(). React-Redux автоматически подписывает подключенные компоненты на store, используя этот механизм.

Роль React-Redux

Библиотека React-Redux предоставляет два основных способа подключения: HOC connect и хуки useSelector/useDispatch. Оба используют контекст React для доступа к store и подписку на изменения. Когда состояние меняется, React-Redux сравнивает выбранные данные с предыдущими (через функцию селектора) и, если они изменились, вызывает ререндер компонента.

Пример с useSelector

import { useSelector } from 'react-redux';

function Counter() {
  const count = useSelector(state => state.counter.value);
  return <div>{count}</div>;
}

Здесь useSelector подписывается на store. При каждом изменении состояния он выполняет селектор и сравнивает результат с предыдущим. Если результат отличается, компонент ререндерится.

Почему ререндер происходит только при изменении выбранных данных

React-Redux использует строгое сравнение (===) по умолчанию. Если селектор возвращает новый объект каждый раз, это может вызвать лишние ререндеры. Для оптимизации можно использовать shallowEqual или мемоизацию селекторов.

Вывод

Понимание этого механизма помогает избегать лишних ререндеров и писать эффективные React-приложения с Redux. Используйте селекторы, которые возвращают стабильные ссылки, и применяйте мемоизацию при необходимости.