Как записать значение в localStorage не обновляя его хуком useState?

Question

[pinkhead_psd]

Пытаюсь разобраться как работает localStorage в связке с react`ом и tp. Написал обычный счетчик и задача стоит в том, чтобы сохранить последнее значение в локаль, потом перезагрузить страницу или закрыть, а при открытие начать с того же места.
Данные записываются, однако при обновлении страницы значение становиться нулевым. Я так понимаю, это происходит потому что useState по дефолту дает значение нуль счетчику, useEffect отрабатывает и записывает туда этот нуль.
Вот сам код:

import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {

  const [count,setCount] = useState(0);

  const inc = () => {
    setCount(prev => prev+1)
  }

  const dec = () => {
    setCount(prev => prev-1)
  }

  useEffect(() => {
    localStorage.setItem('count',JSON.stringify(count))
  },[count])

  useEffect(() => {
    const count = JSON.parse(localStorage.getItem('count') || '');
    setCount(count)
    console.log(count);
  },[])
  
  return (
    <div className="App">
      <h1>Count: {count}</h1>
      <button onClick={inc}>+</button>
      <button onClick={dec}>-</button>
    </div>
  );
}

export default App;

Answer 1

[0xD34F]

function App() {
  const [ count, setCount ] = useState(() => +localStorage.getItem('count') || 0);

  useEffect(() => {
    localStorage.setItem('count', count);
  }, [ count ]);

  const onClick = e => setCount(count => count + +e.target.dataset.change);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={onClick} data-change="+1">+</button>
      <button onClick={onClick} data-change="-1">-</button>
    </div>
  );
}

Comments

[pinkhead_psd]

Спасибо! Есть парочка недочетов, но суть ясна
Рабочий код:

import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {

  const [count,setCount] = useState(() => {
    const count:number = JSON.parse(localStorage.getItem('count') || '');
    return Number.isInteger(count) ? count : 0;
  });

  const inc = () => {
    setCount(prev => prev+1)
  }

  const dec = () => {
    setCount(prev => prev-1)
  }

  useEffect(() => {
    localStorage.setItem('count',JSON.stringify(count))
  },[count])
  
  return (
    <div className="App">
      <h1>Count: {count}</h1>
      <button onClick={inc}>+</button>
      <button onClick={dec}>-</button>
    </div>
  );
}

export default App;