Home > References > Web Development > Reactjs references

How to re-render on browser resize in React JS

Last updated : July 16, 2022

The approach behind re-rendering a React component on window resize can be broken down into three steps.

  1. Create state variables for window width and height
  2. Create a function that assigns window dimensions to the width and height state variables
  3. Add that function as the resize event listener to the window. This can be done in the useLayoutEffect hook.

Let's take a look at an example to sort the confusion.

export const App = () => {
const [windowWidth, setWindowWidth] = useState(window.innerWidth)
const [windowHeight, setWindowHeight] = useState(window.innerHeight)
const setWindowDimensions = () => {
  setWindowWidth(window.innerWidth)
  setWindowHeight(window.innerHeight)
}
useEffect(() => {
  window.addEventListener('resize', setWindowDimensions);
  return () => {
    window.removeEventListener('resize', setWindowDimensions)
  }
}, [])
return(
  <div>Width: {windowWidth} Height: {windowHeight}</div>
 )
}
export default App

As described in the above steps, first I created two state variables to hold the window width and height.

const [windowWidth, setWindowWidth] = useState(window.innerWidth)
const [windowHeight, setWindowHeight] = useState(window.innerHeight)

Then I created a function to update the window width and height state variables.

const setWindowDimensions = () => {
  setWindowWidth(window.innerWidth)
  setWindowHeight(window.innerHeight)
}

As the third step, I added resize event listeners to call the setWindowDimensions function when the window is resized. It is very important to remove the resize event listener when the component unmounts.

useEffect(() => {
  window.addEventListener('resize', setWindowDimensions);
  return () => {
    window.removeEventListener('resize', setWindowDimensions)
  }
}, [])

Custom hook to detect browser resize

This method is ok for single use. To make this functionality more reusable, we can move this logic into a custom hook. That makes it easy to reuse this resize detection functionality as a utility component.

export const useWindowSize = (): number[] => {
    const [windowSize, setWindowSize] = useState([0,0])
    const updateWindowSize = () => {
        setWindowSize([window.innerWidth, window.innerHeight])
    }
    useLayoutEffect(() => {
        window.addEventListener('resize', updateWindowSize);
        updateWindowSize();
        return () => window.removeEventListener('resize', updateWindowSize);
    },[])
    return [windowSize[0], windowSize[1]]
}

The usage is simple as importing and using the useWindowSize hook in the component where we want to detect the window resizing.

import { useWindowSize } from "./components/useWindowSize"
export const App = () => {
const [width, height] = useWindowSize()
return(
  <div>
    <div><h3>React js window dimensions</h3></div>
    <div>Width: {width}</div><div>Height: {height}</div>
  </div>
 )
}
export default App
How to re-render on browser re-size in React JS
Figure 1: How to re-render on browser re-size in React JS
Lance
By: Lance
Lance is a software engineer with over 15 years of experience in full-stack software development.
Read more...

Comments are disabled

No Comments