Avoid unnecesary rerenders

components/common/Layout/Layout.tsx

@@ -2,14 +2,13 @@ import cn from 'classnames'
 import dynamic from 'next/dynamic'
 import s from './Layout.module.css'
 import { useRouter } from 'next/router'
-import debounce from 'lodash.debounce'
-import React, { FC, useCallback, useEffect, useState, Suspense } from 'react'
+import React, { FC } from 'react'
 import { useUI } from '@components/ui/context'
 import { Navbar, Footer } from '@components/common'
 import { usePreventScroll } from '@react-aria/overlays'
 import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
 import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
-import { Container, Sidebar, Button, Modal, LoadingDots } from '@components/ui'
+import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
 import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
 
 const Loading = () => (
@@ -56,46 +55,16 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
     modalView,
   } = useUI()
   const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
-  const [hasScrolled, setHasScrolled] = useState(false)
   const { locale = 'en-US' } = useRouter()
 
-  console.log('Layout')
-
   usePreventScroll({
     isDisabled: !(displaySidebar || displayModal),
   })
 
-  // const handleScroll = useCallback(
-  //   debounce(() => {
-  //     const offset = 0
-  //     const { scrollTop } = document.documentElement
-  //     const scrolled = scrollTop > offset
-
-  //     setHasScrolled(scrolled)
-  //   }, 1),
-  //   []
-  // )
-
-  // useEffect(() => {
-  //   document.addEventListener('scroll', handleScroll)
-  //   return () => {
-  //     document.removeEventListener('scroll', handleScroll)
-  //   }
-  // }, [handleScroll])
-
   return (
     <CommerceProvider locale={locale}>
       <div className={cn(s.root)}>
-        <header
-          className={cn(
-            'sticky top-0 bg-primary z-40 transition-all duration-150',
-            { 'shadow-magical': hasScrolled }
-          )}
-        >
-          <Container>
-            <Navbar />
-          </Container>
-        </header>
+        <Navbar />
         <main className="fit">{children}</main>
         <Footer pages={pageProps.pages} />
         <Sidebar open={displaySidebar} onClose={closeSidebar}>

components/common/Navbar/Navbar.module.css

@@ -1,3 +1,7 @@
+.root {
+  @apply sticky top-0 bg-primary z-40 transition-all duration-150;
+}
+
 .link {
   @apply inline-flex items-center text-primary leading-6 font-medium transition ease-in-out duration-75 cursor-pointer text-accents-6;
 }

components/common/Navbar/Navbar.tsx

@@ -1,49 +1,68 @@
-import { FC } from 'react'
+import { FC, useState, useEffect } from 'react'
 import Link from 'next/link'
 import s from './Navbar.module.css'
-import { Logo } from '@components/ui'
+import { Logo, Container } from '@components/ui'
 import { Searchbar, UserNav } from '@components/common'
+import cn from 'classnames'
+import throttle from 'lodash.throttle'
 interface Props {
   className?: string
 }
 
 const Navbar: FC<Props> = ({ className }) => {
   const rootClassName = className
+  const [hasScrolled, setHasScrolled] = useState(false)
+
+  const handleScroll = () => {
+    const offset = 0
+    const { scrollTop } = document.documentElement
+    const scrolled = scrollTop > offset
+    setHasScrolled(scrolled)
+  }
+
+  useEffect(() => {
+    document.addEventListener('scroll', throttle(handleScroll, 200))
+    return () => {
+      document.removeEventListener('scroll', handleScroll)
+    }
+  }, [handleScroll])
 
   return (
-    <div className={rootClassName}>
-      <div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
-        <div className="flex flex-1 items-center">
-          <Link href="/">
-            <a className={s.logo} aria-label="Logo">
-              <Logo />
-            </a>
-          </Link>
-          <nav className="space-x-4 ml-6 hidden lg:block">
+    <div className={cn(s.root, { 'shadow-magical': hasScrolled })}>
+      <Container>
+        <div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
+          <div className="flex flex-1 items-center">
             <Link href="/">
-              <a className={s.link}>All</a>
+              <a className={s.logo} aria-label="Logo">
+                <Logo />
+              </a>
             </Link>
-            <Link href="/search?q=clothes">
-              <a className={s.link}>Clothes</a>
-            </Link>
-            <Link href="/search?q=accessories">
-              <a className={s.link}>Accessories</a>
-            </Link>
-          </nav>
+            <nav className="space-x-4 ml-6 hidden lg:block">
+              <Link href="/">
+                <a className={s.link}>All</a>
+              </Link>
+              <Link href="/search?q=clothes">
+                <a className={s.link}>Clothes</a>
+              </Link>
+              <Link href="/search?q=accessories">
+                <a className={s.link}>Accessories</a>
+              </Link>
+            </nav>
+          </div>
+
+          <div className="flex-1 justify-center hidden lg:flex">
+            <Searchbar />
+          </div>
+
+          <div className="flex flex-1 justify-end space-x-8">
+            <UserNav />
+          </div>
         </div>
 
-        <div className="flex-1 justify-center hidden lg:flex">
-          <Searchbar />
+        <div className="flex pb-4 lg:px-6 lg:hidden">
+          <Searchbar id="mobileSearch" />
         </div>
-
-        <div className="flex flex-1 justify-end space-x-8">
-          <UserNav />
-        </div>
-      </div>
-
-      <div className="flex pb-4 lg:px-6 lg:hidden">
-        <Searchbar id="mobileSearch" />
-      </div>
+      </Container>
     </div>
   )
 }