title: useEffect always has empty array on refresh
body: <p>If I navigate the website using the navigation it works fine but if I refresh the browser then what I get from useEffect is always an empty array but I don't know why.</p>
  <pre><code>  const [footerSidebars, setFooterSidebars] = useState([]);
  
    useEffect(() =&gt; {
      const ourRequest = axios.CancelToken.source();
      const getFooter = async () =&gt; {
        async function getSidebarOne() {
          try {
            const { data } = await axios.get(
              `http://localhost:8888/example/wp-json/api-sidebars/v1/sidebar1`
            );
            return data;
          } catch (err) {
            console.log(err);
          }
        }
  
        async function getSidebarTwo() {
          try {
            const { data } = await axios.get(
              `http://localhost:8888/example/wp-json/api-sidebars/v1/sidebar3`
            );
            return data;
          } catch (err) {
            console.log(err);
          }
        }
  
        const sidebars = await axios.all([getSidebarOne(), getSidebarTwo()]);
  
        setFooterSidebars(sidebars);
  
        console.log(footerSidebars);
      };
      getFooter();
      return () =&gt; {
        ourRequest.cancel();
      };
    }, []);
  </code></pre>
  <p>I get an undefined error when trying to output the data</p>
  <pre><code>    {footerSidebars &amp;&amp; (
        &lt;div
          dangerouslySetInnerHTML={{
            __html: DOMPurify.sanitize(footerSidebars[0].body_response),
          }}
        /&gt;
      )}
  </code></pre>
  <p>UPDATE:</p>
  <p>I added a length check and it seems to work now. Is this the correct approach though?</p>
  <pre><code>    {footerSidebars.length &amp;&amp; (
        &lt;div
          dangerouslySetInnerHTML={{
            __html: DOMPurify.sanitize(footerSidebars[0].body_response),
          }}
        /&gt;
      )}
  </code></pre>