title: How to implement localStorage syncer
body: <p>I want to implement my useLocalStorage file with my App.js but i'm having trouble understanding how to do so, as I'm still learning.</p>
  <p>useLocalStorage.js</p>
  <pre><code>import { useState, useEffect } from &quot;react&quot;;
  
  
  function useLocalStorage(key, firstValue = null) {
      const initialValue = localStorage.getItem(key) || firstValue;
    
      const [item, setItem] = useState(initialValue);
    
      useEffect(function setKeyInLocalStorage() {
        console.debug(&quot;hooks useLocalStorage useEffect&quot;, &quot;item=&quot;, item);
    
        if (item === null) {
          localStorage.removeItem(key);
        } else {
          localStorage.setItem(key, item);
        }
      }, [key, item]);
    
      return [item, setItem];
    }
    
    export default useLocalStorage;
  </code></pre>
  <p>App.js</p>
  <pre><code>import useLocalStorage from &quot;./hooks/useLocalStorage&quot;;
  
  const App = () =&gt; {
    const dispatch = useDispatch();
  
    useEffect(() =&gt; {
      dispatch(axios());
    }, []);
  
    return (
      &lt;BrowserRouter&gt;
        &lt;LastLocationProvider&gt;
          &lt;Navbar /&gt;
          &lt;Routes /&gt;
          &lt;Footer /&gt;
        &lt;/LastLocationProvider&gt;
      &lt;/BrowserRouter&gt;
    );
  };
  
  export default App;
  </code></pre>
  <p>Any tips or knowledge that you can pass would be greatly appreciated!</p>