useWindowSize Hook

Tracking window size is essential for responsive designs, conditional rendering, and dynamic layouts. This hook provides real-time window dimensions.

import { useState, useEffect } from 'react';

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

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

  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    // Set initial size
    handleResize();

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

  return windowSize;
}

How It Works

• Initializes with current window dimensions.
• Listens to the resize event and updates state.
• Cleans up the event listener on unmount.
• Returns an object with width and height.

Example Usage

function ResponsiveComponent() {
  const { width, height } = useWindowSize();

  return (
    <div>
      <p>Window size: {width} x {height}</p>
      {width < 768 ? (
        <MobileLayout />
      ) : (
        <DesktopLayout />
      )}
    </div>
  );
}

Breakpoint Example

function BreakpointDemo() {
  const { width } = useWindowSize();
  const isMobile = width < 640;
  const isTablet = width >= 640 && width < 1024;
  const isDesktop = width >= 1024;

  return (
    <div>
      {isMobile && <MobileView />}
      {isTablet && <TabletView />}
      {isDesktop && <DesktopView />}
    </div>
  );
}

Use Cases

• Conditional rendering based on screen size
• Dynamic layout calculations
• Responsive image sizing
• Adjusting chart/graph dimensions
• Mobile vs desktop navigation

Notes

• Returns { width: 0, height: 0 } during SSR.
• Consider debouncing if you need to limit resize event frequency.
• For CSS breakpoints, prefer media queries when possible.

Essential for building responsive React applications that adapt to different screen sizes.