mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-12 06:06:10 +00:00
Marc-André Bombeck
21a297adf8
The previous useEffect-driven flavour returned false on the server and on the first client paint, then flipped on the effect tick. ResponsiveSheet and CoachDrawer branch their render tree off the value, so a phone-class viewport painted the desktop branch for one frame before swapping — Coach drawer side flipped from right to bottom between paints and sheet contents re-mounted through the wrong layout. Switch to useSyncExternalStore with a matchMedia client snapshot. The server snapshot stays false (no window present) so SSR markup remains deterministic, but the very first client render reads the live media query state synchronously — by the time either consumer opens its tree the hook already reflects the runtime viewport.
70 lines
2.8 KiB
TypeScript
70 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useSyncExternalStore } from "react";
|
|
|
|
/**
|
|
* Viewport-width hook seeded from a SSR-safe snapshot.
|
|
*
|
|
* v1.4.27 R4 RC3 — the previous `useEffect`-driven flavour returned
|
|
* `false` on the server AND on the first client paint, then flipped to
|
|
* the live value on the effect tick. Two consumers
|
|
* (`<ResponsiveSheet>`, `<CoachDrawer>`) branch their render tree off
|
|
* the value, so a phone-class viewport painted the desktop branch for
|
|
* one frame before swapping. The Coach drawer's `side` flipped from
|
|
* `right` to `bottom` between paints; sheet contents re-mounted and
|
|
* controlled inputs flashed through the wrong layout.
|
|
*
|
|
* The new implementation uses `useSyncExternalStore` with a
|
|
* `matchMedia(...).matches` client snapshot. SSR still resolves to
|
|
* `false` (no `window`), but the very first client render reads the
|
|
* live media-query state synchronously, so the first paint already
|
|
* matches the runtime viewport.
|
|
*
|
|
* Trade-off: SSR markup for phone-class viewports still paints the
|
|
* desktop branch (no React hydration mismatch — both server and the
|
|
* client's first render under the SSR boundary use `false`), then the
|
|
* first client render after hydration flips to the live value. For the
|
|
* two consumers above this is acceptable because both gate visibility
|
|
* on `open`/`isOpen` state — the desktop branch never paints until the
|
|
* user actually opens the sheet/drawer, by which point hydration has
|
|
* already settled and the hook reads the live value on the very first
|
|
* render of the open tree.
|
|
*
|
|
* Defaults to the `md` breakpoint (768 px) because that matches the
|
|
* existing dashboard `md:hidden` / `md:block` switches and the
|
|
* `<ResponsiveSheet>` primitive's bottom-sheet branch. Consumers that
|
|
* need a tighter cut (e.g. the Coach drawer, which flips to a
|
|
* bottom-sheet only below `sm` / 640 px) pass an explicit breakpoint.
|
|
*/
|
|
function getMediaQuery(breakpoint: "sm" | "md"): string {
|
|
const maxWidth = breakpoint === "sm" ? "639.98px" : "767.98px";
|
|
return `(max-width: ${maxWidth})`;
|
|
}
|
|
|
|
function subscribe(query: string): (callback: () => void) => () => void {
|
|
return (callback) => {
|
|
if (typeof window === "undefined") return () => {};
|
|
const mql = window.matchMedia(query);
|
|
mql.addEventListener("change", callback);
|
|
return () => mql.removeEventListener("change", callback);
|
|
};
|
|
}
|
|
|
|
function getClientSnapshot(query: string): boolean {
|
|
if (typeof window === "undefined") return false;
|
|
return window.matchMedia(query).matches;
|
|
}
|
|
|
|
function getServerSnapshot(): boolean {
|
|
return false;
|
|
}
|
|
|
|
export function useIsMobile(breakpoint: "sm" | "md" = "md"): boolean {
|
|
const query = getMediaQuery(breakpoint);
|
|
return useSyncExternalStore(
|
|
subscribe(query),
|
|
() => getClientSnapshot(query),
|
|
getServerSnapshot,
|
|
);
|
|
}
|