Skip to content

Commit b1fc9a0

Browse files
authored
Fix: Initialize useIsMobile state for SSR consistency (#126)
1 parent 80ab967 commit b1fc9a0

1 file changed

Lines changed: 6 additions & 3 deletions

File tree

src/hooks/use-mobile.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,12 @@ import * as React from 'react';
33
const MOBILE_BREAKPOINT = 768;
44

55
export function useIsMobile() {
6-
const [isMobile, setIsMobile] = React.useState<boolean>(false);
6+
const [isMobile, setIsMobile] = React.useState<boolean>(() => {
7+
if (typeof window === 'undefined') {
8+
return false; // Default for SSR
9+
}
10+
return window.innerWidth < MOBILE_BREAKPOINT; // Initial value for client
11+
});
712

813
React.useEffect(() => {
914
if (typeof window === 'undefined') {
@@ -14,8 +19,6 @@ export function useIsMobile() {
1419
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
1520
};
1621

17-
checkIsMobile(); // Set initial value
18-
1922
const resizeObserver = new ResizeObserver(() => {
2023
checkIsMobile();
2124
});

0 commit comments

Comments
 (0)