Для чего используется хук useSelector?

useSelector (react-redux) — хук, который читает данные из Redux-стора и подписывает компонент на их изменения.

Как используется

const itemsCount = useSelector((state) => state.cart.items.length);

• Селектор — чистая функция state => value.
• При каждом dispatch react-redux прогоняет селектор по новому состоянию и сравнивает результат с предыдущим через строгое равенство (===).
• Отличается — компонент ререндерится; совпадает — нет. Так достигаются точечные обновления (в отличие от контекста, который будит всех потребителей).

Главная ловушка

Селектор, создающий новый объект/массив при каждом вызове, ломает сравнение — ререндер на любой dispatch:

// ❌ новая ссылка каждый раз
const titles = useSelector((s) => s.items.map((i) => i.title));
const data = useSelector((s) => ({ user: s.user, cart: s.cart }));

Решения:

• выбирать примитивы или готовые ссылки из стора (несколько маленьких useSelector);
• useSelector(selectFn, shallowEqual) — поверхностное сравнение;
• мемоизированные селекторы: createSelector из reselect (RTK) — пересчёт и новая ссылка только при изменении входов.

Хорошие практики

Селекторы выносить рядом со слайсом (selectCartTotal) — переиспользуются и тестируются; не класть в компонент весь стор (useSelector((s) => s)); для отправки действий — useDispatch.

Коротко для собеседования

useSelector читает кусок Redux-состояния и подписывает компонент: после dispatch результат селектора сравнивается по ===, при изменении — ререндер. Главная ошибка — селектор, возвращающий новый объект/массив (ререндер на каждый dispatch); лечится узкими селекторами, shallowEqual или createSelector.