useWindowSize

Requirements

• Export useWindowSize() as a named and default React hook returning { width, height }. On the initial browser render read window.innerWidth and window.innerHeight.
• After a window resize event, update both dimensions together from the current window values. Track the viewport, not the document size or outer browser dimensions.
• If neither dimension changed, preserve the returned object reference. Unrelated React rerenders must not replace the object or recreate the resize subscription.
• Read the dimensions again when subscribing so a change between initial rendering and effect setup is not missed.
• Add one resize listener per mounted instance, remove it on unmount, and do not leave duplicate listeners after Strict Mode effect replay.
• When window is unavailable during server rendering, return { width: undefined, height: undefined } without accessing browser APIs. In TypeScript define WindowSize with each dimension typed number | undefined.
• Instances are independent. CSS, debouncing, ResizeObserver, responsive breakpoints, and reconciling dimension-based markup during server hydration are outside scope.

Examples

Input: window.innerWidth = 1280 and window.innerHeight = 720
Output: Returns { width: 1280, height: 720 }.

Input: Window resizes to 800 by 600
Output: Next state is { width: 800, height: 600 }.

Input: Render on a server without window
Output: Returns { width: undefined, height: undefined }.