title: My use effect is not firing when expected
body: <p>I have an &quot;Inbox&quot; page. Depending on the current screen size, I render either a mobile friendly version of the inbox or a desktop version.</p>
  <p>Currently my page doesn't render the messages every time, I can see that it's due to my <code>useEffect</code></p>
  <p>Here's the Inbox component:</p>
  <pre><code>import { useEffect } from &quot;react&quot;;
  import { getUserConversations } from &quot;@services/firebase/client/chat-client-services&quot;;
  import userDataStore from &quot;@stores/UserState/UserStore&quot;;
  import InboxMessagePreview from &quot;@components/Inbox/InboxMessagePreview/InboxMessagePreview&quot;;
  import authStore from &quot;@stores/AuthState/AuthStore&quot;;
  import useSWR from &quot;swr&quot;;
  import Chat from &quot;@components/Chat/Chat&quot;;
  import Router, { useRouter } from &quot;next/router&quot;;
  import useWindowSize from &quot;hooks/useWindowSize&quot;;
  import { classNames } from &quot;helpers/helpers&quot;;
  import Skeleton from &quot;@components/UI/Loading/Skeleton/Skeleton&quot;;
  
  export default function Inbox() {
    const size = useWindowSize();
    const currentUser = authStore((state) =&gt; state.currentUser);
    const userData = userDataStore((state) =&gt; state.userData);
    const { data, error } = useSWR(currentUser?.uid, getUserConversations);
    const router = useRouter();
  
    console.log({ data });
    console.log({ size });
  
    useEffect(() =&gt; {
      if (
        !Router?.query?.chat &amp;&amp;
        data?.conversations?.length &gt; 0 &amp;&amp;
        size.width &gt;= 768
      ) {
        console.log(&quot;IN USE EFFECT IF&quot;);
        Router.push(
          {
            pathname: `/inbox`,
            query: { chat: data.conversations[0].docID },
          },
          undefined,
          { shallow: true }
        );
      }
    }, [data, size]);
  
    if (error) {
      &lt;p&gt;Error&lt;/p&gt;;
    }
  
    if (!data) {
      return &lt;InboxSkeleton /&gt;;
    }
  
    if (size?.width &lt; 768 &amp;&amp; data) {
      return (
        &lt;MobileChat
          currentUser={currentUser}
          data={data}
          query={router?.query}
          userData={userData}
        /&gt;
      );
    }
  
    if (size?.width &gt;= 768 &amp;&amp; data) {
      return (
        &lt;DesktopChat
          currentUser={currentUser}
          data={data}
          query={router?.query}
          userData={userData}
        /&gt;
      );
    }
  
    return null;
  }
  </code></pre>
  <p>The console log inside the useEffect does not fire sometimes on page load and therefore I can't see the console log and the messages do not load and a blank page is shown.</p>
  <p>My guesses are either the <code>useWindowSize()</code> hook or using Next's <code>Router</code>.</p>
  <p>The reason I am using both <code>useRouter</code> and <code>Router</code> is because I use <code>Router</code> inside useEffects.
  If I use <code>router.push()</code> inside a <code>useEffect</code>, React will warn me that it will need to be added to the dependency array. If I do this, the <code>router</code> will be updated in the <code>useEffect</code> and then it will therefore re-trigger, creating an infinite loop.</p>
  <p>The <code>useWindowSize</code> is as follows:</p>
  <pre><code>import { useState, useEffect } from &quot;react&quot;;
  // Define general type for useWindowSize hook, which includes width and height
  interface Size {
    width: number | undefined;
    height: number | undefined;
  }
  function useWindowSize(): Size {
    const [windowSize, setWindowSize] = useState&lt;Size&gt;({
      width: undefined,
      height: undefined,
    });
    useEffect(() =&gt; {
      // Handler to call on window resize
      function handleResize() {
        // Set window width/height to state
        setWindowSize({
          width: window.innerWidth,
          height: window.innerHeight,
        });
      }
      // Add event listener
      window.addEventListener(&quot;resize&quot;, handleResize);
      // Call handler right away so state gets updated with initial window size
      handleResize();
      // Remove event listener on cleanup
      return () =&gt; window.removeEventListener(&quot;resize&quot;, handleResize);
    }, []); // Empty array ensures that effect is only run on mount
    return windowSize;
  }
  
  export default useWindowSize;
  </code></pre>