useWindowSize for React

useIsMobile answers one question: is the viewport narrower than its breakpoint. useWindowSize returns the current width and height in pixels, from innerWidth and innerHeight. Use the numbers when you are placing something, sizing a canvas, or comparing to a threshold you compute. A boolean breakpoint will not tell you how many pixels you have. Both update from the browser. Neither one watches a single element.

Pass it when a resize should not call setState on every event. The hook wraps the state setter in lodash debounce for that many milliseconds, and the resize listener calls the wrapped setter. The first call inside the effect is wrapped too, so the first numbers can wait for the delay. Without the option, the setter runs immediately. The hook does not cancel a pending debounced call on cleanup, so keep the delay short.

No. The hook reads window.innerWidth and window.innerHeight. Those are the layout viewport inside the scrollbars, which is the space the page can actually use. They are not outerWidth and outerHeight, and they are not the screen size. A classic scrollbar makes innerWidth smaller than the full window. Overlay scrollbars often do not. If you need a single element, measure that element. This hook only watches the window.

Pass initializeWithValue set to false. On the server the hook forces that flag off anyway. On the client, false means the first state is undefined for both width and height, which matches the server HTML. An effect then reads the real window and updates. The default is true on the client, and that reads innerWidth during the first render, which the server cannot do. Render a fallback while either value is undefined.

Yes. The server never touches window. A module flag checks the environment and forces the initial size to undefined, even if you asked to initialize with a value. The listener is added in an effect after the browser commits. No timer and no matchMedia run on the server. The return value on the server is an object whose width and height are both undefined.

Calling the hook with no options, or with initializeWithValue left unset or true, is typed as width and height numbers. Passing initializeWithValue false is typed as number or undefined, because the first client render and the server render do not have a measurement yet. The effect fills both fields together. If you only need the numbers after mount, branch on undefined once, then use the values. The hook has no separate ready flag.