Comments 7
сейчас практически любой стейт менеджер из коробки или плагином умеет в локалстор. Да и даже если просто, не стоит писать велосипед. Если не хватает нативного апи, лучше взять какое-то готовое решение.
Реакт код реально какое то месиво сам по себе))
Ой как удобно в изначальном примере добавить юзэффект который асинхронно исполняется, а потом искать серебряную пулю чтобы решить проблему с мигающим интерфейсом которую сами же создали. useState умеет принимать функцию-инициализатор если что, useLayoutEffect тоже существует.
Ну и чо-то я не понял как будет типизация работать если ты по одному ключу разные данные попытаешься записать? Локал сторадж-то общий. Если у тебя один компонент пишет поле counter и другой пишет counter то приплыли. Или ещё лучше - два экземпляра одного и того же компонента.
Первый пример намеренно гипертрофирован и показывает худший случай, да. Ниже указаны какие могут быть проблемы в целом при работе с local storage напрямую и через хуки, в том числе и через useState и useLayoutEffect.
Про два экземпляра одного и того же компонента, то как раз эта статья показывает как сделать чтобы при обновлении состояния в одном компоненте, второй получал то же значение, так же как если бы это было сделано через общий стор в redux или zustand. Если нужно чтобы два экземпляра одного и того же компонента считали counter независимо друг от друга, то стоит использовать локальный стейт через useState, а не local storage
С удовольствием прочитал и добавил в закладки, спасибо) в одном моменте есть неясность:
function ThemeToggle() {
const { value, set } = useTypedStorageItem('theme', { storage: myStorage });
return (
<button onClick={() => set(value === 'light' ? 'dark' : 'light')}>
Current mode: {value}
</button>
);
}Вот здесь myStorage это что, откуда взялось? Поиск "myStorage" по статье ничего не даёт, оно в одном экземпляре здесь. Сходив в доку вашей библиотеки, я быстро понял что к чему, но вот на этапе прочтения возникли вопросы)
Покажу как работают с local storage в $mol
Описываем страницу ( как в html просто через TS классы )
$my_app $mol_page
theme $mol_state_local
value?val <=> theme?val \light
body /
<= Toggle $mol_button_minor
click?event <=> toggle!
title <= themeДалее описываем метод
namespace $.$$ {
export class $my_app extends $mol_page {
@ $mol_mem
toggle() {
this.theme(
this.theme() === 'light' ? 'dark' : 'light'
)
}
}
}И получаем кратно меньше кода, а преимуществ даже больше
✅ Нет мигания - значение читается синхронно
✅ JSON.parse защищён try-catch внутри
✅ Типизация через TypeScript
✅ Синхронизация между компонентами - автоматически через реактивность
✅ Синхронизация между вкладками - встроена в
$mol_state_local✅ SSR-safe - проверка
typeof window !== 'undefined'внутри
Хватит неправильно использовать localStorage в React