</>
typescriptbeginner

useWindowSize Hook

Track browser window dimensions with debounced resize handling for responsive component logic.

typescript
import { useState, useEffect } from 'react';

export function useWindowSize() {
  const [size, setSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    let timer: ReturnType<typeof setTimeout>;
    const update = () => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        setSize({ width: window.innerWidth, height: window.innerHeight });
      }, 150);
    };
    update();
    window.addEventListener('resize', update);
    return () => {
      window.removeEventListener('resize', update);
      clearTimeout(timer);
    };
  }, []);

  return size;
}

Use Cases

  • Responsive layouts
  • Canvas sizing
  • Conditional rendering by breakpoint

Tags

#hooks#responsive#window#resize

Related Snippets

Similar patterns you can reuse in the same workflow.

typescriptbeginner

useMediaQuery — Responsive Breakpoint Hook

Subscribe to CSS media query changes and get a boolean flag for responsive rendering logic in React.

Best for: Responsive layouts

#hooks#responsive
typescriptbeginner

React Responsive Breakpoint Hook

A useMediaQuery hook for responsive rendering with SSR-safe breakpoint detection.

Best for: Conditional rendering based on screen size

#react#responsive
typescriptintermediate

useResizeObserver Hook

Tracks element dimensions using ResizeObserver with debounced updates.

Best for: Responsive layouts

#hooks#resize
typescriptbeginner

useBreakpoints Hook

Returns the current Tailwind-style breakpoint based on window width for responsive logic.

Best for: Responsive component logic

#hooks#responsive