Хватит неправильно использовать localStorage в React

[DmitryOlkhovoi]

сейчас практически любой стейт менеджер из коробки или плагином умеет в локалстор. Да и даже если просто, не стоит писать велосипед. Если не хватает нативного апи, лучше взять какое-то готовое решение.

[Finesse]

Верно. Но знать то, как правильно работать с localStorage напрямую, тоже полезно.

[themen2]

Реакт код реально какое то месиво сам по себе))

[adminNiochen]

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

Ну и чо-то я не понял как будет типизация работать если ты по одному ключу разные данные попытаешься записать? Локал сторадж-то общий. Если у тебя один компонент пишет поле counter и другой пишет counter то приплыли. Или ещё лучше - два экземпляра одного и того же компонента.

[hardlight]

Первый пример намеренно гипертрофирован и показывает худший случай, да. Ниже указаны какие могут быть проблемы в целом при работе с local storage напрямую и через хуки, в том числе и через useState и useLayoutEffect.

Про два экземпляра одного и того же компонента, то как раз эта статья показывает как сделать чтобы при обновлении состояния в одном компоненте, второй получал то же значение, так же как если бы это было сделано через общий стор в redux или zustand. Если нужно чтобы два экземпляра одного и того же компонента считали counter независимо друг от друга, то стоит использовать локальный стейт через useState, а не local storage

[winkyBrain]

С удовольствием прочитал и добавил в закладки, спасибо) в одном моменте есть неясность:

function ThemeToggle() {
  const { value, set } = useTypedStorageItem('theme', { storage: myStorage });
  
  return (
      <button onClick={() => set(value === 'light' ? 'dark' : 'light')}>
          Current mode: {value}
      </button>
  ); 
}

Вот здесь myStorage это что, откуда взялось? Поиск "myStorage" по статье ничего не даёт, оно в одном экземпляре здесь. Сходив в доку вашей библиотеки, я быстро понял что к чему, но вот на этапе прочтения возникли вопросы)

[cmyser]

Покажу как работают с 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' внутри

[WildeDJ]

Работа с готовым решением везде +/- будет выглядеть так. Статья больше про работу с нативным браузерным апи без molосипедов. Каждый раз смотря на синтаксис чувствую себя Индиана Джонсом в египте

[cmyser]

В мол все готовые решения связаны под капотом, для любых компонентов, это большой плюс, не нужно писать лишний код интеграции

С нативным браузером можно везде работать, да

Синтаксис не привычный, но учиться так же легко как html на самом деле, есть так же классы со своими атрибутами, только вместо всех разновидностей html объектов у нас один mol_view который может быть и div и li ( любым )