Merge branch 'main' into rnd-5808-sidebar-new-style-settings-gbo

.changeset/quiet-oranges-provide.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Fix dynamic tabs infinite loop

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;
 }

packages/gitbook/src/components/Insights/InsightsProvider.tsx

@@ -86,15 +86,6 @@ export function InsightsProvider(props: InsightsProviderProps) {
             | undefined;
     }>({});
 
-    /**
-     * Get the visitor ID and store it in a ref.
-     */
-    React.useEffect(() => {
-        getVisitorId().then((visitorId) => {
-            visitorIdRef.current = visitorId;
-        });
-    }, []);
-
     /**
      * Synchronously flush all the pending events.
      */
@@ -194,13 +185,19 @@ export function InsightsProvider(props: InsightsProviderProps) {
         },
     );
 
-    // When the page is unloaded, flush all events
+    /**
+     * Get the visitor ID and store it in a ref.
+     */
     React.useEffect(() => {
-        window.addEventListener('beforeunload', flushEventsSync);
+        getVisitorId().then((visitorId) => {
+            visitorIdRef.current = visitorId;
+            // When the page is unloaded, flush all events, but only if the visitor ID is set
+            window.addEventListener('beforeunload', flushEventsSync);
+        });
         return () => {
             window.removeEventListener('beforeunload', flushEventsSync);
         };
-    }, [flushEventsSync]);
+    }, []);
 
     return (
         <InsightsContext.Provider value={trackEvent}>