React useWindowSize Hook

Ever tried to track window dimensions in React and ended up with resize event chaos, SSR hydration nightmares, or performance-killing re-renders? You know the drill—manually adding window resize listeners, forgetting to debounce high-frequency events, dealing with server-side rendering mismatches, missing cleanup causing memory leaks. This free open source React useWindowSize custom hook handles all that viewport tracking complexity so you can focus on building responsive interfaces instead of debugging resize event edge cases in your React applications.

useWindowSize showcase

Real-time window dimension tracking with debouncing and SSR support:

"use client";import { toast } from "sonner";import { Button } from "@/components/ui/button";import { Badge } from "@/components/ui/badge";import { Label } from "@/components/ui/label";import { useWindowSize } from "@/components/ui/shadcn-io/use-window-size";export default function UseWindowSizeDemo() {  const { width = 0, height = 0 } = useWindowSize();  const getBreakpoint = () => {    if (width < 640) return { name: 'XS', color: 'destructive' as const };    if (width < 768) return { name: 'SM', color: 'default' as const };    if (width < 1024) return { name: 'MD', color: 'secondary' as const };    if (width < 1280) return { name: 'LG', color: 'outline' as const };    if (width < 1536) return { name: 'XL', color: 'default' as const };    return { name: '2XL', color: 'secondary' as const };  };  const breakpoint = getBreakpoint();  const aspectRatio = width > 0 ? (width / height).toFixed(2) : '0.00';  const handleManualCheck = () => {    toast.success("Current window size! 📏", {      description: `${width} × ${height}px (${breakpoint.name})`,    });  };  return (    <div className="p-6 max-w-sm mx-auto space-y-4">      {/* Header */}      <div className="text-center space-y-1">        <h3 className="text-lg font-semibold">Window Size Demo</h3>        <p className="text-sm text-muted-foreground">Real-time viewport tracking</p>      </div>            {/* Current Dimensions */}      <div className="space-y-2">        <Label className="text-sm font-medium">Current Dimensions</Label>        <div className="bg-muted rounded p-2 min-h-[60px] flex items-center justify-center">          <div className="text-center">            <div className="text-xl font-mono font-bold text-primary mb-1">              {width} × {height}            </div>            <Badge variant={breakpoint.color} className="text-xs">              {breakpoint.name}            </Badge>          </div>        </div>      </div>      {/* Properties */}      <div className="space-y-2">        <Label className="text-sm font-medium">Properties</Label>        <div className="grid grid-cols-2 gap-2 h-16">          <div className="bg-muted rounded p-2 flex flex-col justify-center items-center">            <Label className="text-xs text-muted-foreground">Aspect Ratio</Label>            <span className="text-sm font-mono">{aspectRatio}</span>          </div>          <div className="bg-muted rounded p-2 flex flex-col justify-center items-center">            <Label className="text-xs text-muted-foreground">Area</Label>            <span className="text-sm font-mono">{(width * height / 1000).toFixed(0)}K</span>          </div>        </div>      </div>      {/* Manual Check */}      <div className="space-y-2">        <Label className="text-sm font-medium">Manual Check</Label>        <div className="min-h-[40px] flex items-center">          <Button            onClick={handleManualCheck}            variant="outline"            className="w-full h-10"          >            📏 Get Current Size          </Button>        </div>      </div>      {/* Instructions */}      <div className="text-center min-h-[16px] flex items-center justify-center">        <div className="text-xs text-muted-foreground">          Resize window to see automatic updates        </div>      </div>    </div>  );}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

This free open source React hook simplifies responsive design with TypeScript support for modern JavaScript applications. Whether you're building adaptive layouts, responsive dashboards, or viewport-aware components in your Next.js projects, this custom hook keeps your window size tracking reliable and performant.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/use-window-size.json

npx shadcn@latest add https://www.shadcn.io/registry/use-window-size.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/use-window-size.json

bunx shadcn@latest add https://www.shadcn.io/registry/use-window-size.json

Why most window dimension tracking implementations suck

Look, you could keep manually adding resize event listeners and tracking dimensions. But then you hit the window size complexity—performance issues from unthrottled resize events, SSR hydration mismatches with undefined dimensions, memory leaks from forgotten cleanup, inconsistent breakpoint detection in React applications.

Most developers manually add window resize listeners without debouncing, causing performance issues when components re-render 60+ times per second during window resize in TypeScript components. Or they forget about SSR considerations and get hydration mismatches when server-rendered content differs from client-side window dimensions. Some skip cleanup entirely and create memory leaks from orphaned event listeners on unmounted components in Next.js projects.

This React hook uses optimized dimension tracking under the hood, with automatic debouncing and SSR-safe initialization in JavaScript applications. The browser handles all the resize events, plus you get comprehensive performance optimization and type safety in one call.

Plus it handles all the edge cases—SSR compatibility with controlled hydration, debounced updates for performance, automatic cleanup and memory management, type-safe dimension access in React development. No more layout shifts or broken responsive behavior.

This free open source React hook manages viewport state while you focus on building features. Whether you're creating React applications, Next.js dashboards, or TypeScript components, reliable window size tracking keeps your JavaScript development responsive.

Features

• Real-time tracking with automatic window resize event handling and instant updates in React applications
• Performance optimized using configurable debouncing to prevent excessive re-renders in TypeScript components
• SSR compatible with proper server-side rendering support and hydration safety for Next.js projects
• Type-safe implementation with comprehensive TypeScript definitions and overloads for JavaScript development
• Memory efficient using optimized event listeners with automatic cleanup in React frameworks
• Flexible initialization supporting both immediate and undefined states for different environments in modern applications
• Free open source designed for modern React development workflows

When you'll actually use this

Real talk—this isn't for basic responsive design in React applications. CSS media queries handle most viewport-based styling perfectly. But when you need actual window dimensions in JavaScript for dynamic layouts or complex responsive logic, this React hook delivers in Next.js projects.

Perfect for:

• Dynamic layouts - Adaptive grid systems and component sizing based on viewport built with TypeScript
• Canvas and visualization - Charts, maps, and graphics that need precise dimensions using React patterns
• Mobile-first components - Viewport-aware interfaces with conditional rendering in JavaScript applications
• Performance optimization - Debounced resize handling for intensive layout calculations in React components
• Breakpoint detection - JavaScript-based responsive behavior beyond CSS capabilities in Next.js applications
• Dashboard interfaces - Adaptive admin panels and data visualization layouts using TypeScript safety

API Reference

useWindowSize

useWindowSize<T extends boolean = true>(
  options?: UseWindowSizeOptions<T>
): WindowSize<T extends false ? number | undefined : number>

UseWindowSizeOptions

Return Value (WindowSize)

Things to watch out for

SSR requires careful initialization: Use initializeWithValue: false to prevent hydration mismatches in React applications. The React hook will return undefined initially and update with actual dimensions after client hydration in TypeScript components.

Debouncing affects responsiveness: While debouncing improves performance during rapid resize events, it delays updates in Next.js projects. Choose the right balance between performance and real-time responsiveness for your use case in JavaScript applications.

innerWidth includes scrollbars: The React hook uses window.innerWidth and window.innerHeight, which include scrollbars in the measurement in React frameworks. This matches viewport behavior but differs from clientWidth in TypeScript projects.

Memory management is automatic: The React hook properly cleans up resize event listeners on component unmount in modern applications. Multiple components can use the hook simultaneously without conflicts.

Related hooks you will also like

Questions you might have