Чем плохо использование localstorage вне хука useEffect?

Question

[kokapuk]

В общем, у меня есть приложение, которое подгружает данные из localstorage в состояние и уже из состояния в поле defaultValue в инпутах, и поскольку useEffect вызывается первый раз только после рендера, то при подгрузке значение в инпутах уже не меняется, так как defalutValue устанавливается лишь единожды, я нашел для себя такой выход:

const [settings, setSettings] = useState<ISettings>(
    localStorage.getItem("settings") == null ? defaultSettings : (JSON.parse(localStorage.getItem("settings")!) as ISettings)
  );

чем это плачевно и плачевно ли это вообще?

Comments

[GlazOtca]

localStorage - исполняется в синхронном режиме, а это значит, что если поток чтения будет занят(например идет чтение-запись в других вкладках) - то и useState подвиснет и соответственно рендер тоже. Если делать это в useEffect, который выполняется после построения дерева DOM, то задержки рендера не будет. Т.е. работать ваш вариант будет, но некоторая разница в поведении, при определенных условиях будет.

[Alexandroppolus]

GlazOtca, если заморачиваться на вероятные тормоза ввода-вывода, то лучше сразу уйти на что-то асинхронное (например indexedDB) и тогда уже канонично использовать useEffect. Ибо синхронное получение данных в useEffect - не канон.

Answer 1

[Alexandroppolus]

Вполне рабочий вариант. Я бы только обернул это дело в стрелочную функцию, чтобы на каждом рендере не лазить в локалсторадж

const [settings, setSettings] = useState<ISettings>(() => 
    localStorage.getItem("settings") == null ? defaultSettings : (JSON.parse(localStorage.getItem("settings")!) as ISettings)
  );

Comments

[kokapuk]

Спасибо!