From 2ad7c59c432846cf8aa940f421650a4e362cbbc6 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 6 Nov 2020 17:11:49 -0300 Subject: [PATCH] Avoid unnecesary rerenders --- components/common/Layout/Layout.tsx | 37 +--------- components/common/Navbar/Navbar.module.css | 4 ++ components/common/Navbar/Navbar.tsx | 79 ++++++++++++++-------- package.json | 4 +- yarn.lock | 21 +++--- 5 files changed, 71 insertions(+), 74 deletions(-) diff --git a/components/common/Layout/Layout.tsx b/components/common/Layout/Layout.tsx index e346feb73..d53f0a740 100644 --- a/components/common/Layout/Layout.tsx +++ b/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 = ({ 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 (
-
- - - -
+
{children}