fix(toc): Track hash in state to fix browser back navigation scrolling

src/components/tableOfContents.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import {useEffect, useRef, useState} from 'react';
+import {useEffect, useState} from 'react';
 
 type TreeItem = {
   children: TreeItem[];
@@ -71,24 +71,33 @@ export function TableOfContents({ignoreIds = []}: Props) {
     setTreeItems(_tocItems);
   }, [ignoreIds]);
 
+  // Track current hash to trigger scroll when it changes (e.g., browser back/forward)
+  const [currentHash, setCurrentHash] = useState('');
+
+  useEffect(() => {
+    // Initialize hash and listen for changes
+    setCurrentHash(window.location.hash);
+    const handleHashChange = () => setCurrentHash(window.location.hash);
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+  }, []);
+
   // Re-scroll to hash anchor after TOC renders to compensate for layout shift.
   // The TOC starts empty and populates client-side, which pushes content down
   // and causes the browser's initial anchor scroll to land on the wrong section.
-  const hasScrolledToHash = useRef(false);
+  // This effect re-runs whenever the hash or treeItems change.
   useEffect(() => {
-    if (hasScrolledToHash.current || treeItems.length === 0) {
-      return;
-    }
-    const hash = window.location.hash;
-    if (!hash) {
-      return;
+    if (treeItems.length === 0 || !currentHash) {
+      return undefined;
     }
-    hasScrolledToHash.current = true;
-    requestAnimationFrame(() => {
-      const id = decodeURIComponent(hash.slice(1));
+    const rafId = requestAnimationFrame(() => {
+      const id = decodeURIComponent(currentHash.slice(1));
       document.getElementById(id)?.scrollIntoView();
     });
-  }, [treeItems]);
+    return () => {
+      cancelAnimationFrame(rafId);
+    };
+  }, [currentHash, treeItems]);
 
   return (
     <ul>