Fix SSR "window is not defined" error in useWindowResize hook

[Copilot]

The useWindowResize hook assumes window is always available, causing SSR failures.

Changes

src/hooks/useWindowResize.ts

• Guard getWindowSize() to return { height: 0, width: 0 } when window is undefined
• Add default values when destructuring innerHeight/innerWidth for additional safety
• Skip event listener attachment in useEffect when running on server

tests/useWindowResize.test.ts (new)

• Add tests for SSR safety, resize handling, debouncing, and cleanup

Pattern

Follows existing SSR patterns in the codebase (e.g., useLocalStorage/common/utils.ts):

function getWindowSize(): WindowSize {
  if (typeof window === "undefined") {
    return { height: 0, width: 0 };
  }
  const { innerHeight = 0, innerWidth = 0 } = window;
  return { height: innerHeight, width: innerWidth };
}

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Fix "window is not defined" error in useWindowResize hook</issue_title>
<issue_description>## Problem

The useWindowResize hook currently assumes that the window object is always available. This causes errors when rendering on the server (such as in SSR or during static builds), where the window object is not defined.

Suggested Solution

• Update the hook to check if the window object is available before attempting to access its properties (innerWidth/innerHeight), such as in the initial state function and within the resize handler.
• Return default dimensions if window is not present to avoid runtime errors.
• Optionally, skip attaching event listeners on the server.

Acceptance Criteria

• The hook no longer throws a "window is not defined" error in SSR environments.
• The functionality is preserved for client-side usage.

File: src/hooks/useWindowResize.ts</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Fix "window is not defined" error in useWindowResize hook #742

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.