From a30f569f752d85578d05f44f7903b2619ef2fa8c Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Thu, 16 Jan 2025 00:15:50 +0100 Subject: [PATCH 1/3] Fix warning --- src/utils/hooks/useIsMobile.ts | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/src/utils/hooks/useIsMobile.ts b/src/utils/hooks/useIsMobile.ts index 1fb7f62d4..4bfdc8cd4 100644 --- a/src/utils/hooks/useIsMobile.ts +++ b/src/utils/hooks/useIsMobile.ts @@ -1,20 +1,27 @@ -import { useLayoutEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import debounce from 'lodash/debounce'; const useIsMobile = (): boolean => { - const [isMobile, setIsMobile] = useState(false); + // Initialize with null to avoid hydration mismatch + const [isMobile, setIsMobile] = useState(null); - useLayoutEffect(() => { - const updateSize = (): void => { + useEffect(() => { + // Skip effect on server side + if (typeof window === 'undefined') return; + + const updateSize = debounce((): void => { setIsMobile(window.innerWidth < 768); - }; - window.addEventListener('resize', debounce(updateSize, 250)); + }, 250); + + // Initial check updateSize(); + window.addEventListener('resize', updateSize); return (): void => window.removeEventListener('resize', updateSize); }, []); - return isMobile; + // Return false during SSR, actual value after hydration + return isMobile ?? false; }; export default useIsMobile; From b38688bd06d1095f9ebf5979aec74dd180d24e63 Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Thu, 16 Jan 2025 00:18:14 +0100 Subject: [PATCH 2/3] Fix wrning --- src/components/Header/Header.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Header/Header.component.tsx b/src/components/Header/Header.component.tsx index a85f9b4b6..4c54364ba 100644 --- a/src/components/Header/Header.component.tsx +++ b/src/components/Header/Header.component.tsx @@ -16,7 +16,7 @@ interface IHeaderProps { const Header = ({ title }: IHeaderProps) => ( <> - Next.js webshop with WooCommerce {title} + {`Next.js webshop with WooCommerce ${title}`} Date: Thu, 16 Jan 2025 00:44:38 +0100 Subject: [PATCH 3/3] Fix cart display --- src/components/Header/Cart.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Header/Cart.component.tsx b/src/components/Header/Cart.component.tsx index e8d0ff2b9..f8690540d 100644 --- a/src/components/Header/Cart.component.tsx +++ b/src/components/Header/Cart.component.tsx @@ -50,7 +50,7 @@ const Cart = ({ stickyNav }: ICartProps) => { {productCount && ( {productCount}