Improve navbar performance

components/common/Navbar/Navbar.tsx

@@ -1,66 +1,47 @@
-import { FC, useState, useEffect } from 'react'
+import { FC } from 'react'
 import Link from 'next/link'
-import s from './Navbar.module.css'
 import { Logo, Container } from '@components/ui'
 import { Searchbar, UserNav } from '@components/common'
-import cn from 'classnames'
-import throttle from 'lodash.throttle'
+import NavbarRoot from './NavbarRoot'
+import s from './Navbar.module.css'
 
-const Navbar: FC = () => {
-  const [hasScrolled, setHasScrolled] = useState(false)
-
-  useEffect(() => {
-    const handleScroll = throttle(() => {
-      const offset = 0
-      const { scrollTop } = document.documentElement
-      const scrolled = scrollTop > offset
-      setHasScrolled(scrolled)
-    }, 200)
-
-    document.addEventListener('scroll', handleScroll)
-    return () => {
-      document.removeEventListener('scroll', handleScroll)
-    }
-  }, [])
-
-  return (
-    <div className={cn(s.root, { 'shadow-magical': hasScrolled })}>
-      <Container>
-        <div className="relative flex flex-row justify-between py-4 align-center md:py-6">
-          <div className="flex items-center flex-1">
-            <Link href="/">
-              <a className={s.logo} aria-label="Logo">
-                <Logo />
-              </a>
+const Navbar: FC = () => (
+  <NavbarRoot>
+    <Container>
+      <div className="relative flex flex-row justify-between py-4 align-center md:py-6">
+        <div className="flex items-center flex-1">
+          <Link href="/">
+            <a className={s.logo} aria-label="Logo">
+              <Logo />
+            </a>
+          </Link>
+          <nav className="hidden ml-6 space-x-4 lg:block">
+            <Link href="/search">
+              <a className={s.link}>All</a>
             </Link>
-            <nav className="hidden ml-6 space-x-4 lg:block">
-              <Link href="/search">
-                <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="justify-center flex-1 hidden lg:flex">
-            <Searchbar />
-          </div>
-
-          <div className="flex justify-end flex-1 space-x-8">
-            <UserNav />
-          </div>
+            <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 pb-4 lg:px-6 lg:hidden">
-          <Searchbar id="mobile-search" />
+        <div className="justify-center flex-1 hidden lg:flex">
+          <Searchbar />
         </div>
-      </Container>
-    </div>
-  )
-}
+
+        <div className="flex justify-end flex-1 space-x-8">
+          <UserNav />
+        </div>
+      </div>
+
+      <div className="flex pb-4 lg:px-6 lg:hidden">
+        <Searchbar id="mobile-search" />
+      </div>
+    </Container>
+  </NavbarRoot>
+)
 
 export default Navbar

components/common/Navbar/NavbarRoot.tsx

@@ -0,0 +1,33 @@
+import { FC, useState, useEffect } from 'react'
+import throttle from 'lodash.throttle'
+import cn from 'classnames'
+import s from './Navbar.module.css'
+
+const NavbarRoot: FC = ({ children }) => {
+  const [hasScrolled, setHasScrolled] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = throttle(() => {
+      const offset = 0
+      const { scrollTop } = document.documentElement
+      const scrolled = scrollTop > offset
+
+      if (hasScrolled !== scrolled) {
+        setHasScrolled(scrolled)
+      }
+    }, 200)
+
+    document.addEventListener('scroll', handleScroll)
+    return () => {
+      document.removeEventListener('scroll', handleScroll)
+    }
+  }, [hasScrolled])
+
+  return (
+    <div className={cn(s.root, { 'shadow-magical': hasScrolled })}>
+      {children}
+    </div>
+  )
+}
+
+export default NavbarRoot