React doesn't re-render on window resize automatically — window.innerWidth isn't reactive. You make it reactive by putting the value in state and updating it from a resize listener.

The hook

function useWindowSize() {
  const [size, setSize] = useState(() => ({
    width: window.innerWidth,
    height: window.innerHeight,
  }));

  useEffect(() => {
    const handleResize = () => {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    };
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize); // cleanup!
    // empty deps — set up once
  }, []);

  return size;
}

Using it:

const { width } = useWindowSize();
return width < 768 ? <MobileNav /> : <DesktopNav />;

State change → re-render. Done.

The three things people get wrong

1. No cleanup — not removing the listener in the effect's return leaks listeners on every mount/unmount.
2. No throttle/debounce — resize fires rapidly (dozens of events per second while dragging). Setting state on each one floods React with renders. Throttle (e.g. every ~100–150ms — keeps it responsive) or debounce (only after resize stops — cheaper) the handler.

``js const handleResize = throttle(() => setSize({...}), 150); // and: return () => { handleResize.cancel?.(); window.removeEventListener(...); } ``

1. SSR — window doesn't exist on the server. Guard the initializer, or initialize to a default and set the real value in useEffect (which only runs client-side). Beware hydration mismatch.

Better alternatives — often you don't need JS at all

• CSS media queries / container queries — if you just need layout to change, do it in CSS. No re-render, no JS. This is the right answer most of the time.
• window.matchMedia — if you need a boolean breakpoint in JS (isMobile), listen to a MediaQueryList instead of raw resize — it only fires when the breakpoint actually crosses, not on every pixel.
• ResizeObserver — if you care about a specific element's size (not the window), this is the correct tool — it's element-scoped and more efficient.

How to answer

"Window dimensions aren't reactive, so I put them in state and update from a throttled resize listener inside a useEffect, with cleanup on unmount — packaged as a useWindowSize hook. But I'd first ask whether I even need JS: if it's purely layout, CSS media/container queries are better; if I need a JS boolean breakpoint, matchMedia; if I need an element's size, ResizeObserver."