useWindowSize

Phillmont MuktarAI Engineer

Implement a useWindowSize hook that returns the current height and width of the window (window.innerHeight and window.innerWidth). It should re-render the component if the screen properties changes.

export default function Component() {
  const screen = useWindowSize();

  return (
    <div>
      <p>The current window dimensions are:</p>
      <code>{JSON.stringify(screen, null, 2)}</code>
    </div>
  );
}

Arguments

Nothing.

Returns

The hook returns an object with the following properties:

height: number: Current height of the screen
width: number: Current width of the screen

useWindowSize (Official solution)

Phillmont MuktarAI Engineer

Solution

The useWindowSize hook can be implemented using the useState hook to store the current screen properties and the useLayoutEffect hook to update the properties when the screen is resized. We can attach an event listener to the resize event on the window object to update the properties state.

useLayoutEffect is used instead of useEffect to ensure that the size is updated synchronously after the browser has painted. This is important for animations and other visual effects that depend on the window size.

We recreate the windowSize object so that the user doesn't accidentally mutate the original object.

import { useState, useLayoutEffect } from 'react';

interface WindowSize {
  height: number;
  width: number;
}

export default function useWindowSize(): WindowSize {
  const [windowSize, setWindowSize] = useState<WindowSize>({
    height: 0,
    width: 0,
  });

  useLayoutEffect(() => {
    const resize = () =>
      setWindowSize({
        height: window.innerHeight,
        width: window.innerWidth,
      });

    resize();
    window.addEventListener('resize', resize);

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

  return windowSize;
}

You must be signed in to view your submissions

Sign in

Create an account