Improve navbar performance

components/common/Navbar/Navbar.tsx

@@ -1,30 +1,12 @@
-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 NavbarRoot from './NavbarRoot'
-import throttle from 'lodash.throttle'
+import s from './Navbar.module.css'
 
-const Navbar: FC = () => {
+const Navbar: FC = () => (
-  const [hasScrolled, setHasScrolled] = useState(false)
+  <NavbarRoot>
-
-  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">
@@ -59,8 +41,7 @@ const Navbar: FC = () => {
         <Searchbar id="mobile-search" />
       </div>
     </Container>
-    </div>
+  </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