Fix dynamic tabs infinite loop (#2677)

GitbookIO · Jan 7, 2025 · cbe6139 · cbe6139
1 parent deb8c54
commit cbe6139
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/.changeset/quiet-oranges-provide.md b/.changeset/quiet-oranges-provide.md
@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Fix dynamic tabs infinite loop
diff --git a/packages/gitbook/src/components/DocumentView/Tabs/DynamicTabs.tsx b/packages/gitbook/src/components/DocumentView/Tabs/DynamicTabs.tsx
@@ -20,6 +20,7 @@ let globalTabsState: TabsState = (() => {
     const stored = localStorage.getItem('@gitbook/tabsState');
     return stored ? (JSON.parse(stored) as TabsState) : { activeIds: {}, activeTitles: [] };
 })();
+
 const listeners = new Set<() => void>();
 
 function useTabsState() {
@@ -30,13 +31,13 @@ function useTabsState() {
 
     const getSnapshot = useCallback(() => globalTabsState, []);
 
-    const setTabsState = (updater: (previous: TabsState) => TabsState) => {
+    const setTabsState = useCallback((updater: (previous: TabsState) => TabsState) => {
         globalTabsState = updater(globalTabsState);
         if (typeof localStorage !== 'undefined') {
             localStorage.setItem('@gitbook/tabsState', JSON.stringify(globalTabsState));
         }
         listeners.forEach((listener) => listener());
-    };
+    }, []);
     const state = React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
     return [state, setTabsState] as const;
 }