title: Gatsby: React conditional rendering based on window.innerWidth misbehaving
body: <p>Conditional rendering of components based on <code>window.innerWidth</code> seems to not work as intended just in the <strong>production</strong> build of Gatsby based website. </p>
  
  <p>The hook I am using to check the viewport's width, with the additional check for the window global to avoid Gatsby-node production build errors, is the following:</p>
  
  <pre><code>import { useState, useEffect } from 'react'
  
  const useWindowWidth = () =&gt; {
    const windowGlobal = typeof window !== 'undefined'
  
    if(windowGlobal) {
      const [width, setWidth] = useState(window.innerWidth)
  
      useEffect(() =&gt; {
        const handleResize = () =&gt; setWidth(window.innerWidth)
        window.addEventListener('resize', handleResize)
        return () =&gt; {
          window.removeEventListener('resize', handleResize)
        }
      })
  
      return width
    }
  }
  
  export default useWindowWidth
  
  </code></pre>
  
  <p>Then in my actual component I do the following:</p>
  
  <pre><code>IndexPage.Booking = () =&gt; {
    const windowWidth = useWindowWidth()
  
    return (
      &lt;div className="section__booking__wrapper"&gt;
        { windowWidth &lt;= mediaQueries.lg &amp;&amp; &lt;IndexPage.Cta /&gt; }
        &lt;div className="section__booking-bg" style={{ backgroundImage: `url(${bg})` }}&gt;
          { windowWidth &gt; mediaQueries.lg &amp;&amp; &lt;IndexPage.Cta /&gt; }
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>It works as it should in <code>development</code> but the <strong>production</strong> build fails to render: </p>
  
  <pre><code>&lt;div className="section__booking-bg" style={{ backgroundImage: `url(${bg})` }}&gt;
  </code></pre>
  
  <p>When resizing the window below the mediaQueries.lg (1024) it then triggers the actual normal behaviour or conditionally rendering mobile and desktop versions of the component.</p>
  
  <p>To doublecheck if it was because the render triggers on just the <code>resize</code> event (which it doesn't as it works on load in <code>development</code> environment) I also simply, from within the hook <code>console.log()</code> the return value and it gets printed, in <strong>production</strong> correctly on load.</p>
  
  <p>There are also no errors or warnings in the <strong>production</strong> or <code>development</code> build whatsoever.  </p>
  
  <p><strong>Edit as per @Phillip 's suggestion</strong></p>
  
  <pre><code>const useWindowWidth = () =&gt; {
    const isBrowser = typeof window !== 'undefined'
    const [width, setWidth] = useState(isBrowser ? window.innerWidth : 0)
  
    useEffect(() =&gt; {
      if (!isBrowser) return false
  
      const handleResize = () =&gt; setWidth(window.innerWidth)
      window.addEventListener('resize', handleResize)
  
      return () =&gt; {
        window.removeEventListener('resize', handleResize)
      }
    })
  
    return width
  }
  </code></pre>
  
  <p>It now works just when you resize it, once, under the mediaQueries.lg threshold and then it works flawlessly across desktop and mobile but not on load. </p>