refactor(core): optimize App entrypoint, it should not re-render when…

… navigating (#10060)
facebook · Apr 19, 2024 · eb07e9d · eb07e9d
1 parent c746289
commit eb07e9d
Showing 1 changed file with 13 additions and 5 deletions.
diff --git a/packages/docusaurus/src/client/App.tsx b/packages/docusaurus/src/client/App.tsx
@@ -25,9 +25,19 @@ import SiteMetadataDefaults from './SiteMetadataDefaults';
 import ErrorBoundary from '@docusaurus/ErrorBoundary';
 import HasHydratedDataAttribute from './hasHydratedDataAttribute';
 
-export default function App(): JSX.Element {
-  const routeElement = renderRoutes(routes);
+const routesElement = renderRoutes(routes);
+
+function AppNavigation() {
   const location = useLocation();
+  const normalizedLocation = normalizeLocation(location);
+  return (
+    <PendingNavigation location={normalizedLocation}>
+      {routesElement}
+    </PendingNavigation>
+  );
+}
+
+export default function App(): JSX.Element {
   return (
     <ErrorBoundary>
       <DocusaurusContextProvider>
@@ -36,9 +46,7 @@ export default function App(): JSX.Element {
             <SiteMetadataDefaults />
             <SiteMetadata />
             <BaseUrlIssueBanner />
-            <PendingNavigation location={normalizeLocation(location)}>
-              {routeElement}
-            </PendingNavigation>
+            <AppNavigation />
           </Root>
           <HasHydratedDataAttribute />
         </BrowserContextProvider>