significantly improve render performance on nav hover

apollographql · Jan 12, 2024 · 44398e2 · 44398e2
1 parent 60c11ac
commit 44398e2
Show file tree

Hide file tree

Showing 9 changed files with 228 additions and 174 deletions.
diff --git a/src/components/MobileNav.js b/src/components/MobileNav.js
@@ -1,6 +1,6 @@
 import AuthCheck from './AuthCheck';
 import PropTypes from 'prop-types';
-import React, {useContext, useState} from 'react';
+import React, {useContext, useMemo, useState} from 'react';
 import {
   Box,
   Drawer,
@@ -21,26 +21,30 @@ function MobileNavContent({defaultActiveDocset}) {
   const [activeDocset, setActiveDocset] = useState(
     defaultActiveDocset || basePath
   );
+  const pathContextValue = useMemo(
+    () => ({
+      ...pathContext,
+      basePath: `/${activeDocset}`
+    }),
+    [activeDocset, pathContext]
+  );
+  const docsetContextValue = useMemo(
+    () => ({
+      configs,
+      activeDocset,
+      setActiveDocset,
+      sidebarOpen: true,
+      clickToSelect: true
+    }),
+    [activeDocset, configs]
+  );
   return (
     <>
       {!activeDocset && <DrawerCloseButton zIndex="1" top="3" color="white" />}
       <Box overflow="auto" pos="relative" zIndex="0">
-        <DocsetContext.Provider
-          value={{
-            configs,
-            activeDocset,
-            setActiveDocset,
-            sidebarOpen: true,
-            clickToSelect: true
-          }}
-        >
+        <DocsetContext.Provider value={docsetContextValue}>
           {activeDocset ? (
-            <PathContext.Provider
-              value={{
-                ...pathContext,
-                basePath: `/${activeDocset}`
-              }}
-            >
+            <PathContext.Provider value={pathContextValue}>
               <SidebarNav
                 key={activeDocset}
                 currentVersion={configs[activeDocset].currentVersion}
@@ -69,6 +73,13 @@ MobileNavContent.propTypes = {
 export default function MobileNav({isInternal}) {
   const {isOpen, onOpen, onClose} = useDisclosure();
   const pathContext = useContext(PathContext);
+  const pathContextValue = useMemo(
+    () => ({
+      ...pathContext,
+      basePath: '/'
+    }),
+    [pathContext]
+  );
   return (
     <>
       <IconButton
@@ -85,12 +96,7 @@ export default function MobileNav({isInternal}) {
           {isInternal ? (
             <AuthCheck
               fallback={
-                <PathContext.Provider
-                  value={{
-                    ...pathContext,
-                    basePath: '/'
-                  }}
-                >
+                <PathContext.Provider value={pathContextValue}>
                   <MobileNavContent />
                 </PathContext.Provider>
               }

diff --git a/src/components/Page.js b/src/components/Page.js
@@ -493,15 +493,20 @@ export default function Page({file}) {
           ) : null
         }
       >
-        <MultiCodeBlockContext.Provider value={{language, setLanguage}}>
-          {childMdx ? (
-            <MDXProvider components={mdxComponents}>
-              <MDXRenderer>{childMdx.body}</MDXRenderer>
-            </MDXProvider>
-          ) : (
-            processSync(childMarkdownRemark.html).result
-          )}
-        </MultiCodeBlockContext.Provider>
+        {useMemo(
+          () => (
+            <MultiCodeBlockContext.Provider value={{language, setLanguage}}>
+              {childMdx ? (
+                <MDXProvider components={mdxComponents}>
+                  <MDXRenderer>{childMdx.body}</MDXRenderer>
+                </MDXProvider>
+              ) : (
+                processSync(childMarkdownRemark.html).result
+              )}
+            </MultiCodeBlockContext.Provider>
+          ),
+          [childMarkdownRemark?.html, childMdx, language, setLanguage]
+        )}
       </PageContent>
       <HStack
         justify="flex-end"

diff --git a/src/components/PageLayout/PageLayout.js b/src/components/PageLayout/PageLayout.js
@@ -3,7 +3,7 @@ import Footer from '../Footer';
 import Header from '../Header';
 import MobileNav from '../MobileNav';
 import PropTypes from 'prop-types';
-import React, {useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import Sidebar, {
   DefaultSidebarNav,
   PAGE_SIDEBAR_MARGIN,
@@ -31,31 +31,40 @@ export function PageLayout({pageContext, children, location, data}) {
     false
   );
 
-  const lockProps = {
-    isLocked: sidebarLocked,
-    onLockToggle: () => setSidebarLocked(!sidebarLocked)
-  };
+  const lockProps = useMemo(
+    () => ({
+      isLocked: sidebarLocked,
+      onLockToggle: () => setSidebarLocked(!sidebarLocked)
+    }),
+    [setSidebarLocked, sidebarLocked]
+  );
 
-  const hideSidebar = () => setSidebarHidden(true);
+  const hideSidebar = useCallback(
+    () => setSidebarHidden(true),
+    [setSidebarHidden]
+  );
 
   const {pathname} = location;
   const {basePath = '/'} = pageContext;
 
   const {docset, versions, currentVersion, navItems, algoliaFilters, internal} =
     useConfig(basePath);
 
-  const sidebarNav = (
-    <SidebarNav
-      versions={versions}
-      currentVersion={currentVersion}
-      docset={docset}
-      navItems={navItems}
-      hideSidebar={hideSidebar}
-      onVersionChange={version => {
-        navigate(`/${version.slug}`);
-      }}
-      {...lockProps}
-    />
+  const sidebarNav = useMemo(
+    () => (
+      <SidebarNav
+        versions={versions}
+        currentVersion={currentVersion}
+        docset={docset}
+        navItems={navItems}
+        hideSidebar={hideSidebar}
+        onVersionChange={version => {
+          navigate(`/${version.slug}`);
+        }}
+        {...lockProps}
+      />
+    ),
+    [currentVersion, docset, hideSidebar, lockProps, navItems, versions]
   );
 
   const [now, setNow] = useState(Date.now());
@@ -66,15 +75,18 @@ export function PageLayout({pageContext, children, location, data}) {
     signupTracer('docs');
   }, []);
 
+  const pathContextValue = useMemo(
+    () => ({
+      uri: pathname,
+      basePath,
+      path: data?.file?.name === 'index' ? pathname : dirname(pathname)
+    }),
+    [basePath, data?.file?.name, pathname]
+  );
+
   return (
     <PageWidthProvider key={now}>
-      <PathContext.Provider
-        value={{
-          uri: pathname,
-          basePath,
-          path: data?.file?.name === 'index' ? pathname : dirname(pathname)
-        }}
-      >
+      <PathContext.Provider value={pathContextValue}>
         <Header algoliaFilters={algoliaFilters}>
           <MobileNav isInternal={internal} />
         </Header>

diff --git a/src/components/PageWidthContext.js b/src/components/PageWidthContext.js
@@ -4,6 +4,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState
 } from 'react';
@@ -117,18 +118,28 @@ export const PageWidthProvider = ({children}) => {
     root.style.setProperty(DOCS_PAGE_WIDTH_VAR, pageWidthPx + 'px');
   }, [pageWidthPx]);
 
+  const pageWidthContextValue = useMemo(
+    () => ({
+      pageWidthPx,
+      pageWidth,
+      setPageWidth,
+      togglePageWidth,
+      pageRefCallback,
+      showExpandButton
+    }),
+    [
+      pageRefCallback,
+      pageWidth,
+      pageWidthPx,
+      setPageWidth,
+      showExpandButton,
+      togglePageWidth
+    ]
+  );
+
   // Create a context provider with values
   return (
-    <PageWidthContext.Provider
-      value={{
-        pageWidthPx,
-        pageWidth,
-        setPageWidth,
-        togglePageWidth,
-        pageRefCallback,
-        showExpandButton
-      }}
-    >
+    <PageWidthContext.Provider value={pageWidthContextValue}>
       {children}
     </PageWidthContext.Provider>
   );

diff --git a/src/components/Sidebar/DefaultSidebarNav.js b/src/components/Sidebar/DefaultSidebarNav.js
@@ -1,19 +1,21 @@
 import PropTypes from 'prop-types';
-import React, {useContext} from 'react';
+import React, {useContext, useMemo} from 'react';
 import SidebarNav from './SidebarNav';
 import {PathContext} from '../../utils';
 import {useConfig} from '../../utils/config';
 
 export const DefaultSidebarNav = ({hideSidebar, isLocked, onLockToggle}) => {
   const {docset, navItems} = useConfig('/');
   const pathContext = useContext(PathContext);
+  const pathContextValue = useMemo(
+    () => ({
+      ...pathContext,
+      basePath: '/'
+    }),
+    [pathContext]
+  );
   return (
-    <PathContext.Provider
-      value={{
-        ...pathContext,
-        basePath: '/'
-      }}
-    >
+    <PathContext.Provider value={pathContextValue}>
       <SidebarNav
         docset={docset}
         navItems={navItems}

diff --git a/src/components/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js
@@ -3,6 +3,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState
 } from 'react';
@@ -86,6 +87,31 @@ export function Sidebar({
     };
   }, [dismissSidebar]);
 
+  const pathContextValue = useMemo(
+    () => ({
+      ...pathContext,
+      basePath: `/${activeDocset}`
+    }),
+    [pathContext, activeDocset]
+  );
+
+  const docsetContextValue = useMemo(
+    () => ({
+      configs,
+      activeDocset,
+      setActiveDocset,
+      sidebarOpen,
+      openSidebar,
+      dismissSidebar,
+      onKeyboardSelect: () => {
+        setSidebarOpen(false);
+        sidebarNavRef.current?.focusFirstLink();
+      },
+      isLocked
+    }),
+    [activeDocset, configs, dismissSidebar, isLocked, openSidebar, sidebarOpen]
+  );
+
   return (
     <chakra.aside
       ref={outerSidebarRef}
@@ -110,21 +136,7 @@ export function Sidebar({
         transform: isHidden ? 'translateX(-100%)' : 'none'
       }}
     >
-      <DocsetContext.Provider
-        value={{
-          configs,
-          activeDocset,
-          setActiveDocset,
-          sidebarOpen,
-          openSidebar,
-          dismissSidebar,
-          onKeyboardSelect: () => {
-            setSidebarOpen(false);
-            sidebarNavRef.current?.focusFirstLink();
-          },
-          isLocked
-        }}
-      >
+      <DocsetContext.Provider value={docsetContextValue}>
         <LeftSidebarNav
           w={isLocked ? COLLAPSED_SIDEBAR_WIDTH : SIDEBAR_WIDTH}
           onMouseOver={openSidebar}
@@ -152,12 +164,7 @@ export function Sidebar({
           transitionTimingFunction="ease-in-out"
         >
           {activeDocset ? (
-            <PathContext.Provider
-              value={{
-                ...pathContext,
-                basePath: `/${activeDocset}`
-              }}
-            >
+            <PathContext.Provider value={pathContextValue}>
               <SidebarNav
                 key={activeDocset}
                 ref={sidebarNavRef}

diff --git a/src/components/Sidebar/SidebarNav.js b/src/components/Sidebar/SidebarNav.js
@@ -92,6 +92,14 @@ const SidebarNav = forwardRef(
       [navGroups, nav]
     );
 
+    const navContextValue = useMemo(
+      () => ({
+        nav,
+        setNav: setLocalNavState
+      }),
+      [nav, setLocalNavState]
+    );
+
     return (
       <Flex
         direction="column"
@@ -150,12 +158,7 @@ const SidebarNav = forwardRef(
             </Menu>
           )}
         </Flex>
-        <NavContext.Provider
-          value={{
-            nav,
-            setNav: setLocalNavState
-          }}
-        >
+        <NavContext.Provider value={navContextValue}>
           <chakra.nav px="4" pb="3" ref={navRef}>
             <NavItems items={navItems} />
           </chakra.nav>