title: Prevent losing data when refreshing on a different route - react
body: <p>I wanted to prevent losing state on page refresh while being on a different route path. Im curious why the first example does not work. From what i understand when app mounts first thing that gonna render is component itself and then <code>useEffects</code> run. Since i got 3 here, first fetches and saves the data to the <code>invoiceList</code> state and then next useEffect that run <strong>should</strong> fill localStorage key with  <code>invoiceList</code> state data. The last one obviously retrieve the data.</p>
  <p>The second one does fill the <code>&quot;invoiceData&quot;</code> localStorage key with an <strong>empty array</strong>. Why is this happening if the <code>invoiceList</code> state already have the data after the first  <code>useEffect</code>?</p>
  <p>The second example that i provided works. I removed second <code>useEffect</code> and set localStorage key in the first useEffect with response data that i get from fetch.</p>
  <p>I also wonder if im doing everything correct here. Any feedback appreciated :)</p>
  <p><strong>First example (not working):</strong></p>
  <pre><code>    import { ReactElement, useEffect, useState } from &quot;react&quot;;
      import { Outlet } from &quot;react-router-dom&quot;;
      import { Bar } from &quot;../../components/Bar/Bar&quot;;
      import { Invoice } from &quot;./Root.utils&quot;;
      
      type Props = {};
      
      const Root = (props: Props): ReactElement =&gt; {
        const [invoiceList, setInvoiceList] = useState&lt;Invoice[]&gt;([]);
      
        useEffect(() =&gt; {
          const fetchData = async () =&gt; {
            const response = await fetch(&quot;./data.json&quot;);
            const data = await response.json();
      
            setInvoiceList(data);
          };
      
          fetchData();
        }, []);
      
        useEffect(() =&gt; {
          window.localStorage.setItem(&quot;invoiceData&quot;, JSON.stringify(invoiceList));
        }, []);
      
        useEffect(() =&gt; {
          setInvoiceList(
            JSON.parse(window.localStorage.getItem(&quot;invoiceData&quot;) || &quot;[]&quot;)
          );
        }, []);
      
        return (
          &lt;div&gt;
            &lt;Bar /&gt;
            &lt;Outlet context={{ invoiceList }} /&gt;
          &lt;/div&gt;
        );
      };
      
      export default Root;
  </code></pre>
  <p><strong>Second example (working):</strong></p>
  <pre><code>    import { ReactElement, useEffect, useState } from &quot;react&quot;;
      import { Outlet } from &quot;react-router-dom&quot;;
      import { Bar } from &quot;../../components/Bar/Bar&quot;;
      import { Invoice } from &quot;./Root.utils&quot;;
      
      type Props = {};
      
      const Root = (props: Props): ReactElement =&gt; {
        const [invoiceList, setInvoiceList] = useState&lt;Invoice[]&gt;([]);
      
        useEffect(() =&gt; {
          const fetchData = async () =&gt; {
            const response = await fetch(&quot;./data.json&quot;);
            const data = await response.json();
      
            window.localStorage.setItem(&quot;invoiceData&quot;, JSON.stringify(data));
      
            setInvoiceList(data);
          };
      
          fetchData();
        }, []);
      
        useEffect(() =&gt; {
          setInvoiceList(
            JSON.parse(window.localStorage.getItem(&quot;invoiceData&quot;) || &quot;[]&quot;)
          );
        }, []);
      
        return (
          &lt;div&gt;
            &lt;Bar /&gt;
            &lt;Outlet context={{ invoiceList }} /&gt;
          &lt;/div&gt;
        );
      };
      
      export default Root;
  
  </code></pre>