useWindowSize()

The useWindowSize() hook returns the current width and height of the browser window. It uses useSyncExternalStore for optimal performance and concurrent rendering compatibility.

Import

typescript

import { useWindowSize } from 'the-react-hooks';

Usage

Try it out: Resize your browser window to see the values update in real-time below.

Width

0px

Height

0px

Component.tsx

import { useWindowSize } from 'the-react-hooks';

export const Component = () => {
  const { width, height } = useWindowSize();

  return (
    <div>
      <p>Current Width: {width}px</p>
      <p>Current Height: {height}px</p>
    </div>
  );
}

API

Arguments

This hook does not accept any arguments.

Returns

Returns an object with the current window dimensions:

width – number The inner width of the browser window (in pixels).
height – number The inner height of the browser window (in pixels).

PrevioususeWhyDidYouUpdate