Merge pull request #1387 from w3bdesign/develop

w3bdesign · web-flow · commit 96bd57cea02c · 2025-01-16T00:46:11.000+01:00
Fix warning
diff --git a/src/components/Header/Cart.component.tsx b/src/components/Header/Cart.component.tsx
@@ -50,7 +50,7 @@ const Cart = ({ stickyNav }: ICartProps) => {
 
       {productCount && (
         <span
-          className={`w-6 h-6 pb-2 -mt-5 text-center rounded-full         
+          className={`w-6 h-6 pb-2 -mt-5 !ml-auto text-center rounded-full
           ${stickyNav ? 'text-black bg-white' : 'text-white bg-black'}`}
         >
           {productCount}
diff --git a/src/components/Header/Header.component.tsx b/src/components/Header/Header.component.tsx
@@ -16,7 +16,7 @@ interface IHeaderProps {
 const Header = ({ title }: IHeaderProps) => (
   <>
     <Head>
-      <title>Next.js webshop with WooCommerce {title}</title>
+      <title>{`Next.js webshop with WooCommerce ${title}`}</title>
       <meta name="description" content="WooCommerce webshop" />
       <meta name="keywords" content="Ecommerce, WooCommerce" />
       <meta
diff --git 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<boolean | null>(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;

Original file line number	Diff line number	Diff line change
`@@ -50,7 +50,7 @@ const Cart = ({ stickyNav }: ICartProps) => {`
`50`	`50`
`51`	`51`	`{productCount && (`
`52`	`52`	`<span`
`53`		- className={`w-6 h-6 pb-2 -mt-5 text-center rounded-full
	`53`	+ className={`w-6 h-6 pb-2 -mt-5 !ml-auto text-center rounded-full
`54`	`54`	${stickyNav ? 'text-black bg-white' : 'text-white bg-black'}`}
`55`	`55`	`>`
`56`	`56`	`{productCount}`