DOM и React Senior Состояние и useState/useReducer обновлено
useLocalStorage
Условие
Хук как useState, но значение переживает перезагрузку: читает из localStorage при инициализации и пишет при изменении. Ключ передаётся первым аргументом. Битый JSON в хранилище не должен ронять компонент.
Что проверяют тесты
пишет в хранилище
читает существующее
битый JSON не роняет
Как подойти
Три обязательных вещи: ленивая инициализация (иначе чтение на каждом рендере), try/catch вокруг parse и setItem (приватный режим бросает QuotaExceededError), ключ в зависимостях эффекта. Синхронизация между вкладками - follow-up через событие storage.
Подсказки: 3
- Чтение из хранилища должно быть ленивым - в функции инициализации useState.
- JSON.parse обязательно в try/catch: в хранилище может лежать что угодно.
- Запись - в эффекте по изменению значения.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.
Термины по теме
Ещё по теме «Состояние и useState/useReducer»
- Производное значение
- Стабильность dispatch
- Батчинг
- Ленивая инициализация state
- Функциональный апдейтер
- useReducer
- Апдейтер вперемешку со значением
- Ленивая инициализация