fix: ssr hydration

.changeset/bright-paws-attend.md

@@ -0,0 +1,5 @@
+---
+"vocs": patch
+---
+
+Fixed SSR hydration issue in footer navigation.

src/app/components/Footer.tsx

@@ -1,13 +1,14 @@
 import { Pencil2Icon } from '@radix-ui/react-icons'
 import { assignInlineVars } from '@vanilla-extract/dynamic'
 import clsx from 'clsx'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { Footer as ConsumerFooter } from 'virtual:consumer-components'
 
 import type { SidebarItem } from '../../config.js'
 import { useEditLink } from '../hooks/useEditLink.js'
 import { useLayout } from '../hooks/useLayout.js'
+import { useMounted } from '../hooks/useMounted.js'
 import { usePageData } from '../hooks/usePageData.js'
 import { useSidebar } from '../hooks/useSidebar.js'
 import * as styles from './Footer.css.js'
@@ -20,13 +21,9 @@ import { ArrowRight } from './icons/ArrowRight.js'
 
 export function Footer() {
   const { layout } = useLayout()
+  const mounted = useMounted()
   const pageData = usePageData()
 
-  const [mounted, setMounted] = useState(false)
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
   const lastUpdatedAtDate = useMemo(
     () => (pageData.lastUpdatedAt ? new Date(pageData.lastUpdatedAt) : undefined),
     [pageData.lastUpdatedAt],
@@ -76,6 +73,7 @@ function EditLink() {
 }
 
 function Navigation() {
+  const mounted = useMounted()
   const sidebar = useSidebar()
 
   const { pathname } = useLocation()
@@ -128,6 +126,7 @@ function Navigation() {
     }
   }, [])
 
+  if (!mounted) return null
   return (
     <div className={styles.navigation}>
       {prevPage ? (

src/app/components/Outline.tsx

@@ -133,7 +133,7 @@ export function Outline({
       if (!active.current) return
 
       if (window.scrollY === 0) {
-        setActiveId(items[0].id)
+        setActiveId(items[0]?.id)
         return
       }
 

src/app/hooks/useMounted.ts

@@ -0,0 +1,9 @@
+import { useEffect, useState } from 'react'
+
+export function useMounted() {
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+  return mounted
+}