DOM и React Senior Состояние и useState/useReducer обновлено
Подписка на внешнее хранилище
Условие
Хук useStore(store) читает store.getState() и перерисовывает компонент при изменении. store: { getState, subscribe(fn) → отписка }. Подписка снимается при размонтировании.
Что проверяют тесты
читает текущее состояние
обновляется по подписке
отписывается
не пропускает изменение до подписки
Как подойти
Ручная версия useSyncExternalStore. Три обязательные детали: ленивая инициализация, возврат отписки из эффекта и повторное чтение состояния сразу после подписки - окно между рендером и эффектом реально, и в нём теряются обновления. Именно эту дыру закрывает встроенный хук, поэтому в React 18 его и добавили.
Подсказки: 3
- Начальное состояние читается лениво, иначе getState вызовется на каждом рендере.
- subscribe возвращает отписку - её и надо вернуть из эффекта.
- Между первым рендером и подпиской состояние могло измениться - перечитай его в эффекте.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.
Термины по теме
Ещё по теме «Состояние и useState/useReducer»
- Производное значение
- Стабильность dispatch
- Батчинг
- Ленивая инициализация state
- Функциональный апдейтер
- useReducer
- Апдейтер вперемешку со значением
- Ленивая инициализация