mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-09 13:01:00 +00:00
Marc-André BombeckandClaude Opus 4.7
5a8ad3d895
The useState lazy initialiser already runs on the client during hydration and reads the live `window.innerWidth`, so the post-mount handler() call was a no-op that triggered a setState inside useEffect. The eslint react-hooks/set-state-in-effect rule flags this pattern; removing it lets the resize + orientationchange listeners alone drive updates without a hydration-time double set. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
import { getViewportWidth } from "@/lib/charts/x-axis-density";
|
|
|
|
/**
|
|
* Reactive viewport-width hook. SSR-safe — returns the desktop default
|
|
* on the server (so charts paint with desktop tick density on first
|
|
* paint and progressively enhance once mounted) and updates on window
|
|
* resize / orientation change in the browser.
|
|
*
|
|
* Used by the chart wrappers to drive the v1.4.19 universal x-axis
|
|
* tick-density helper. Lightweight — single resize listener, no
|
|
* debounce because Recharts already memoises its tick render and a
|
|
* resize event fires at most a few times per second.
|
|
*/
|
|
export function useViewportWidth(): number {
|
|
const [width, setWidth] = useState<number>(() => getViewportWidth());
|
|
|
|
useEffect(() => {
|
|
const handler = () => setWidth(getViewportWidth());
|
|
window.addEventListener("resize", handler);
|
|
window.addEventListener("orientationchange", handler);
|
|
return () => {
|
|
window.removeEventListener("resize", handler);
|
|
window.removeEventListener("orientationchange", handler);
|
|
};
|
|
}, []);
|
|
|
|
return width;
|
|
}
|