key the docs footer ad

Author: tannerlinsley

src/components/DocsLayout.tsx

@@ -12,6 +12,7 @@ import {
   useMatches,
   useNavigate,
   useParams,
+  useRouterState,
 } from '@tanstack/react-router'
 import { FrameworkSelect } from '~/components/FrameworkSelect'
 import { useLocalStorage } from '~/utils/useLocalStorage'
@@ -358,11 +359,7 @@ export function DocsLayout({
 
   const [showBytes, setShowBytes] = useLocalStorage('showBytes', true)
 
-  const [mounted, setMounted] = React.useState(false)
-
-  React.useEffect(() => {
-    setMounted(true)
-  }, [])
+  const footerAdKey = useRouterState({ select: (d) => d.location.pathname })
 
   const menuItems = menuConfig.map((group, i) => {
     const WrapperComp = group.collapsible ? 'details' : 'div'
@@ -399,8 +396,8 @@ export function DocsLayout({
                   </a>
                 ) : (
                   <Link
-                  to={child.to}
-                  params
+                    to={child.to}
+                    params
                     onClick={() => {
                       detailsRef.current.removeAttribute('open')
                     }}
@@ -566,7 +563,10 @@ export function DocsLayout({
         >
           {children}
         </div>
-        <div className="mb-8 !py-0 mx-auto max-w-full overflow-x-hidden">
+        <div
+          className="mb-8 !py-0 mx-auto max-w-full overflow-x-hidden"
+          key={footerAdKey}
+        >
           <GadFooter />
         </div>
         <div className="sticky flex items-center flex-wrap bottom-2 z-10 right-0 text-xs md:text-sm px-1 print:hidden">