How to resolve root rendering issue with window size set in useState after server render?

Question

After deployment to server and testing in Gatsby with gatsby clean && gatsby build && gatsby serve whenever root (https://foobar.com/) is visited anything that relies on my ThemeProvider for dimensions doesn't render correctly.

After debugging I've isolated my issue down to how my useState is hard set with a value of 0:

 const [size, setSize] = useState({
    windowWidth: hasWindow ? window.innerWidth : 0,
    windowHeight: hasWindow ? window.innerHeight : 0,
  })

full code:

import { useState, useEffect } from 'react'

const hasWindow = typeof window !== 'undefined'

const useWindowDimensions = () => {
  const [size, setSize] = useState({
    windowWidth: hasWindow ? window.innerWidth : 0,
    windowHeight: hasWindow ? window.innerHeight : 0,
  })

  const updateSize = () =>
    setSize({
      windowWidth: window.innerWidth,
      windowHeight: window.innerHeight,
    })

  useEffect(() => (window.onresize = updateSize), [])

  return size
}

export default useWindowDimensions

which gets passed to my ThemeProvider:

import React, { createContext } from 'react'

// Utils
import useWindowDimensions from '../utils/useWindowDimensions'

const defaultContext = {
  windowWidth: 0,
  windowHeight: 0,
}

export const ThemeContext = createContext(defaultContext)

const ThemeProvider = ({ children }) => {
  const { windowWidth, windowHeight } = useWindowDimensions()

  return (
    <ThemeContext.Provider value={{ windowWidth, windowHeight }}>{children}</ThemeContext.Provider>
  )
}

export default ThemeProvider

and if I hard set my useState values:

  const [size, setSize] = useState({
    windowWidth: hasWindow ? window.innerWidth : 1600,
    windowHeight: hasWindow ? window.innerHeight : 1600,
  })

my site renders fine in the browser but this is technically wrong if viewed with a mobile device or the browser is smaller than 1600px. Whenever I navigate to anywhere else in the site the useState is updated and there isn't an issue.

Omitting the ternary check for window and hard setting useState to:

const [size, setSize] = useState({
  windowWidth: window.innerWidth,
  windowHeight: window.innerHeight,
})

produces an expected server rendering error:

"window" is not available during server side rendering.

after gatsby build.

How should I be setting my useState window dimensions after server load so that my site will pass the correct values to the ThemeProvider and render everything correctly when root is visited?

possibly could just do an update them provider on first render of the app to reset it to window dimensions if you don't find another way. — Colin Hale, Jul 14 '22 at 19:46
Have you tried modifying your custom hook `useEffect` like so: `window.addEventListener("resize", updateSize)`? — ivanatias, Jul 14 '22 at 20:13
I have but the issue is during the initial setting of the useState — DᴀʀᴛʜVᴀᴅᴇʀ, Jul 14 '22 at 20:16
What I would do in this case is initialize the state with `undefined`, then inside `useEffect`, add the event listener AND actually execute the `updateSize` function so the state is updated as soon as possible. — ivanatias, Jul 14 '22 at 20:20

score 0 · Accepted Answer · edited Jul 14 '22 at 22:11

Please try this slight modification and let me know if that works. In your useWindowDimensions custom hook:

import { useState, useEffect } from 'react'

const useWindowDimensions = () => {
  const [size, setSize] = useState({
    windowWidth: undefined,
    windowHeight: undefined
  })

  const updateSize = () =>
    setSize({
      windowWidth: window.innerWidth,
      windowHeight: window.innerHeight,
    })

  useEffect(() => {
    window.addEventListener("resize", updateSize);
    updateSize();

    return () => window.removeEventListener("resize", updateSize);
  }, [])

  return size
}

export default useWindowDimensions

Your Context:

const defaultContext = {
  windowWidth: undefined,
  windowHeight: undefined,
}

I like this approach. Slight error so made an edit and thanks for the answer. In testing and in prod it's functional. — DᴀʀᴛʜVᴀᴅᴇʀ, Jul 14 '22 at 22:11

How to resolve root rendering issue with window size set in useState after server render?

1 Answers1