Make sure to only refresh navbar and modals when required

components/common/Layout/Layout.tsx

@@ -49,21 +49,53 @@ interface Props {
   }
 }
 
+const ModalView: FC<{ modalView: string; closeModal(): any }> = ({
+  modalView,
+  closeModal,
+}) => {
+  return (
+    <Modal onClose={closeModal}>
+      {modalView === 'LOGIN_VIEW' && <LoginView />}
+      {modalView === 'SIGNUP_VIEW' && <SignUpView />}
+      {modalView === 'FORGOT_VIEW' && <ForgotPassword />}
+    </Modal>
+  )
+}
+
+const ModalUI: FC = () => {
+  const { displayModal, closeModal, modalView } = useUI()
+  return displayModal ? (
+    <ModalView modalView={modalView} closeModal={closeModal} />
+  ) : null
+}
+
+const SidebarView: FC<{ sidebarView: string; closeSidebar(): any }> = ({
+  sidebarView,
+  closeSidebar,
+}) => {
+  return (
+    <Sidebar onClose={closeSidebar}>
+      {sidebarView === 'CART_VIEW' && <CartSidebarView />}
+      {sidebarView === 'CHECKOUT_VIEW' && <CheckoutSidebarView />}
+      {sidebarView === 'PAYMENT_VIEW' && <PaymentMethodView />}
+      {sidebarView === 'SHIPPING_VIEW' && <ShippingView />}
+    </Sidebar>
+  )
+}
+
+const SidebarUI: FC = () => {
+  const { displaySidebar, closeSidebar, sidebarView } = useUI()
+  return displaySidebar ? (
+    <SidebarView sidebarView={sidebarView} closeSidebar={closeSidebar} />
+  ) : null
+}
+
 const Layout: FC<Props> = ({
   children,
   pageProps: { categories = [], ...pageProps },
 }) => {
-  const {
-    displaySidebar,
-    displayModal,
-    closeSidebar,
-    closeModal,
-    modalView,
-    sidebarView,
-  } = useUI()
   const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
   const { locale = 'en-US' } = useRouter()
-
   const navBarlinks = categories.slice(0, 2).map((c) => ({
     label: c.name,
     href: `/search/${c.slug}`,
@@ -75,24 +107,8 @@ const Layout: FC<Props> = ({
         <Navbar links={navBarlinks} />
         <main className="fit">{children}</main>
         <Footer pages={pageProps.pages} />
-
+        <ModalUI />
-        {displayModal && (
+        <SidebarUI />
-          <Modal onClose={closeModal}>
-            {modalView === 'LOGIN_VIEW' && <LoginView />}
-            {modalView === 'SIGNUP_VIEW' && <SignUpView />}
-            {modalView === 'FORGOT_VIEW' && <ForgotPassword />}
-          </Modal>
-        )}
-
-        {displaySidebar && (
-          <Sidebar onClose={closeSidebar}>
-            {sidebarView === 'CART_VIEW' && <CartSidebarView />}
-            {sidebarView === 'CHECKOUT_VIEW' && <CheckoutSidebarView />}
-            {sidebarView === 'PAYMENT_VIEW' && <PaymentMethodView />}
-            {sidebarView === 'SHIPPING_VIEW' && <ShippingView />}
-          </Sidebar>
-        )}
-
         <FeatureBar
           title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
           hide={acceptedCookies}

components/ui/context.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react'
+import React, { FC, useCallback, useMemo } from 'react'
 import { ThemeProvider } from 'next-themes'
 
 export interface State {
@@ -161,32 +161,60 @@ function uiReducer(state: State, action: Action) {
 export const UIProvider: FC = (props) => {
   const [state, dispatch] = React.useReducer(uiReducer, initialState)
 
-  const openSidebar = () => dispatch({ type: 'OPEN_SIDEBAR' })
+  const openSidebar = useCallback(() => dispatch({ type: 'OPEN_SIDEBAR' }), [
-  const closeSidebar = () => dispatch({ type: 'CLOSE_SIDEBAR' })
+    dispatch,
-  const toggleSidebar = () =>
+  ])
+  const closeSidebar = useCallback(() => dispatch({ type: 'CLOSE_SIDEBAR' }), [
+    dispatch,
+  ])
+  const toggleSidebar = useCallback(
+    () =>
       state.displaySidebar
         ? dispatch({ type: 'CLOSE_SIDEBAR' })
-      : dispatch({ type: 'OPEN_SIDEBAR' })
+        : dispatch({ type: 'OPEN_SIDEBAR' }),
-  const closeSidebarIfPresent = () =>
+    [dispatch, state.displaySidebar]
-    state.displaySidebar && dispatch({ type: 'CLOSE_SIDEBAR' })
+  )
+  const closeSidebarIfPresent = useCallback(
+    () => state.displaySidebar && dispatch({ type: 'CLOSE_SIDEBAR' }),
+    [dispatch, state.displaySidebar]
+  )
 
-  const openDropdown = () => dispatch({ type: 'OPEN_DROPDOWN' })
+  const openDropdown = useCallback(() => dispatch({ type: 'OPEN_DROPDOWN' }), [
-  const closeDropdown = () => dispatch({ type: 'CLOSE_DROPDOWN' })
+    dispatch,
+  ])
+  const closeDropdown = useCallback(
+    () => dispatch({ type: 'CLOSE_DROPDOWN' }),
+    [dispatch]
+  )
 
-  const openModal = () => dispatch({ type: 'OPEN_MODAL' })
+  const openModal = useCallback(() => dispatch({ type: 'OPEN_MODAL' }), [
-  const closeModal = () => dispatch({ type: 'CLOSE_MODAL' })
+    dispatch,
+  ])
+  const closeModal = useCallback(() => dispatch({ type: 'CLOSE_MODAL' }), [
+    dispatch,
+  ])
 
-  const openToast = () => dispatch({ type: 'OPEN_TOAST' })
+  const openToast = useCallback(() => dispatch({ type: 'OPEN_TOAST' }), [
-  const closeToast = () => dispatch({ type: 'CLOSE_TOAST' })
+    dispatch,
+  ])
+  const closeToast = useCallback(() => dispatch({ type: 'CLOSE_TOAST' }), [
+    dispatch,
+  ])
 
-  const setUserAvatar = (value: string) =>
+  const setUserAvatar = useCallback(
-    dispatch({ type: 'SET_USER_AVATAR', value })
+    (value: string) => dispatch({ type: 'SET_USER_AVATAR', value }),
+    [dispatch]
+  )
 
-  const setModalView = (view: MODAL_VIEWS) =>
+  const setModalView = useCallback(
-    dispatch({ type: 'SET_MODAL_VIEW', view })
+    (view: MODAL_VIEWS) => dispatch({ type: 'SET_MODAL_VIEW', view }),
+    [dispatch]
+  )
 
-  const setSidebarView = (view: SIDEBAR_VIEWS) =>
+  const setSidebarView = useCallback(
-    dispatch({ type: 'SET_SIDEBAR_VIEW', view })
+    (view: SIDEBAR_VIEWS) => dispatch({ type: 'SET_SIDEBAR_VIEW', view }),
+    [dispatch]
+  )
 
   const value = useMemo(
     () => ({