Merge pull request #1569 from layer5io/fix/window-dimensions-ssr-guard

fix(useWindowDimensions): guard window access for SSR / static prerender

Author: leecalcote

src/__testing__/useWindowDimensions.client.test.tsx

@@ -0,0 +1,32 @@
+import { act, renderHook } from '@testing-library/react';
+import { useWindowDimensions } from '../custom/Helpers/Dimension/windowSize';
+
+describe('useWindowDimensions (client)', () => {
+  it('reads the real window dimensions after mount', () => {
+    const { result } = renderHook(() => useWindowDimensions());
+    // The mount effect syncs state to the live window size (jsdom default).
+    expect(result.current).toEqual({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+  });
+
+  it('updates (debounced) on window resize', () => {
+    jest.useFakeTimers();
+    try {
+      const { result } = renderHook(() => useWindowDimensions());
+
+      act(() => {
+        (window as unknown as { innerWidth: number }).innerWidth = 480;
+        (window as unknown as { innerHeight: number }).innerHeight = 640;
+        window.dispatchEvent(new Event('resize'));
+        // Resize handling is debounced by 500ms.
+        jest.advanceTimersByTime(500);
+      });
+
+      expect(result.current).toEqual({ width: 480, height: 640 });
+    } finally {
+      jest.useRealTimers();
+    }
+  });
+});

src/__testing__/useWindowDimensions.test.tsx

@@ -0,0 +1,26 @@
+/**
+ * @jest-environment node
+ */
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { useWindowDimensions } from '../custom/Helpers/Dimension/windowSize';
+
+function Probe() {
+  const { width, height } = useWindowDimensions();
+  return React.createElement('div', null, `${width}x${height}`);
+}
+
+describe('useWindowDimensions SSR safety', () => {
+  it('does not read window during render and falls back to 0x0', () => {
+    // The `node` environment has no `window`, mirroring Node SSR and
+    // Next.js static-export prerender. Initial state is zeroed and the
+    // mount effect does not run during renderToString, so `window` is
+    // never touched during render.
+    expect(typeof window).toBe('undefined');
+    let html = '';
+    expect(() => {
+      html = renderToString(React.createElement(Probe));
+    }).not.toThrow();
+    expect(html).toContain('0x0');
+  });
+});

src/custom/Helpers/Dimension/windowSize.tsx

@@ -1,11 +1,19 @@
 import React from 'react';
 
 /**
- * Returns the width and height of the window.
+ * Reads the current window dimensions.
+ *
+ * Only invoked on the client - from the mount effect and the resize handler
+ * in `useWindowDimensions`, never during render. The `typeof window` guard is
+ * a defensive net so a stray render-time call can never throw a
+ * `ReferenceError` under SSR / static prerender.
  *
  * @returns {WindowDimensions} { width, height }
  */
 function getWindowDimensions(): WindowDimensions {
+  if (typeof window === 'undefined') {
+    return { width: 0, height: 0 };
+  }
   const { innerWidth: width, innerHeight: height } = window;
   return {
     width,
@@ -16,12 +24,25 @@ function getWindowDimensions(): WindowDimensions {
 /**
  * Custom hook for getting window dimensions.
  *
+ * State is initialised to zeroed dimensions rather than by reading `window`
+ * in the `useState` initialiser. This keeps the server render and the first
+ * client (hydration) render identical - reading `window` during render would
+ * make them diverge (`0x0` on the server vs the real size on the client) and
+ * trigger a hydration mismatch. The real dimensions are read once on mount
+ * via the effect below and then kept current by the debounced resize listener.
+ *
  * @returns {WindowDimensions} { width, height }
  */
 export function useWindowDimensions(): WindowDimensions {
-  const [windowDimensions, setWindowDimensions] = React.useState(getWindowDimensions());
+  const [windowDimensions, setWindowDimensions] = React.useState<WindowDimensions>({
+    width: 0,
+    height: 0
+  });
 
   React.useEffect(() => {
+    // Sync to the real dimensions on mount (client only).
+    setWindowDimensions(getWindowDimensions());
+
     let resizeTimeout: number;
 
     function handleResize() {