title: Why useEffect doesn't set items from local storage?
body: <p>I've started to learn web development recently and this is making my head hurt. I made a simple todo app where you can add an item with id and value to an array and delete the item from the array. Now I want whenever the site refreshes, I want the items to be there. I made a testing array and for some reason, when refreshed, it works but not with <code>data</code>.</p>
  <pre><code>  const [items, setItems] = useState([]);
    const testarr = [{id: 1, value: &quot;a&quot;}, {id: 2, value: &quot;b&quot;}];
  
    useEffect(() =&gt; {
      const data = JSON.parse(localStorage.getItem(&quot;items&quot;));
      console.log(data);
      // setItems(testarr);
      setItems(data);
    }, [])
  
    useEffect(() =&gt; {
      window.localStorage.setItem(&quot;items&quot;, JSON.stringify(items));
    }, [items]);
  </code></pre>
  <p>What I came up with:</p>
  <pre><code>  useEffect(() =&gt; {
      const data = JSON.parse(localStorage.getItem(&quot;items&quot;));
      data.forEach(element =&gt; {
        setItems(oldarr =&gt; [...oldarr, element]);
      });
    }, [])
  </code></pre>
  <p>The problem is, if I keep refreshing the site fast enough, eventually the array will become empty again. I don't understand, when refreshed it logs <code>data</code> just fine but when I want to <code>setItems(data)</code> that doesn't work. Does anyone know why it behaves like this?</p>