refactor: cleanup scroll handlers (#5709)

packages/docusaurus-theme-classic/src/theme/BackToTopButton/index.tsx

@@ -7,11 +7,14 @@
 
 import React, {useRef, useState} from 'react';
 import clsx from 'clsx';
-import {useLocation} from '@docusaurus/router';
 import {translate} from '@docusaurus/Translate';
 
 import styles from './styles.module.css';
-import {ThemeClassNames, useScrollPosition} from '@docusaurus/theme-common';
+import {
+  ThemeClassNames,
+  useScrollPosition,
+  useLocationChange,
+} from '@docusaurus/theme-common';
 
 const threshold = 300;
 
@@ -68,18 +71,23 @@ function useSmoothScrollToTop(): UseSmoothScrollTopReturn {
 }
 
 function BackToTopButton(): JSX.Element {
-  const location = useLocation();
-  const {smoothScrollTop, cancelScrollToTop} = useSmoothScrollToTop();
   const [show, setShow] = useState(false);
+  const isFocusedAnchor = useRef(false);
+  const {smoothScrollTop, cancelScrollToTop} = useSmoothScrollToTop();
 
-  useScrollPosition(
+  useScrollPosition(({scrollY: scrollTop}, lastPosition) => {
-    ({scrollY: scrollTop}, lastPosition) => {
+    const lastScrollTop = lastPosition?.scrollY;
-      // No lastPosition means component is just being mounted.
+
+    // No lastScrollTop means component is just being mounted.
     // Not really a scroll event from the user, so we ignore it
-      if (!lastPosition) {
+    if (!lastScrollTop) {
+      return;
+    }
+
+    if (isFocusedAnchor.current) {
+      isFocusedAnchor.current = false;
       return;
     }
-      const lastScrollTop = lastPosition.scrollY;
 
     const isScrollingUp = scrollTop < lastScrollTop;
 
@@ -101,9 +109,14 @@ function BackToTopButton(): JSX.Element {
     } else {
       setShow(false);
     }
-    },
+  });
-    [location],
+
-  );
+  useLocationChange((locationChangeEvent) => {
+    if (locationChangeEvent.location.hash) {
+      isFocusedAnchor.current = true;
+      setShow(false);
+    }
+  });
 
   return (
     <button

packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.ts

@@ -5,47 +5,34 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {useState, useCallback, useEffect, useRef} from 'react';
+import {useState, useCallback, useRef} from 'react';
-import {useLocation} from '@docusaurus/router';
 import {useLocationChange, useScrollPosition} from '@docusaurus/theme-common';
 import type {useHideableNavbarReturns} from '@theme/hooks/useHideableNavbar';
 
 const useHideableNavbar = (hideOnScroll: boolean): useHideableNavbarReturns => {
-  const location = useLocation();
   const [isNavbarVisible, setIsNavbarVisible] = useState(hideOnScroll);
   const isFocusedAnchor = useRef(false);
-  const [navbarHeight, setNavbarHeight] = useState(0);
+  const navbarHeight = useRef(0);
   const navbarRef = useCallback((node: HTMLElement | null) => {
     if (node !== null) {
-      setNavbarHeight(node.getBoundingClientRect().height);
+      navbarHeight.current = node.getBoundingClientRect().height;
     }
   }, []);
 
-  useScrollPosition(
+  useScrollPosition((currentPosition, lastPosition) => {
-    (currentPosition, lastPosition) => {
-      const scrollTop = currentPosition.scrollY;
-      const lastScrollTop = lastPosition?.scrollY;
     if (!hideOnScroll) {
       return;
     }
 
-      if (scrollTop < navbarHeight) {
-        setIsNavbarVisible(true);
-        return;
-      }
-
     if (isFocusedAnchor.current) {
       isFocusedAnchor.current = false;
-        setIsNavbarVisible(false);
       return;
     }
 
-      if (lastScrollTop && scrollTop === 0) {
+    const scrollTop = currentPosition.scrollY;
-        setIsNavbarVisible(true);
+    const lastScrollTop = lastPosition?.scrollY;
-      }
-
     const documentHeight =
-        document.documentElement.scrollHeight - navbarHeight;
+      document.documentElement.scrollHeight - navbarHeight.current;
     const windowHeight = window.innerHeight;
 
     if (lastScrollTop && scrollTop >= lastScrollTop) {
@@ -53,30 +40,22 @@ const useHideableNavbar = (hideOnScroll: boolean): useHideableNavbarReturns => {
     } else if (scrollTop + windowHeight < documentHeight) {
       setIsNavbarVisible(true);
     }
-    },
+  });
-    [navbarHeight, isFocusedAnchor],
-  );
 
   useLocationChange((locationChangeEvent) => {
-    if (!hideOnScroll || locationChangeEvent.location.hash) {
+    if (!hideOnScroll) {
+      return;
+    }
+
+    if (locationChangeEvent.location.hash) {
+      isFocusedAnchor.current = true;
+      setIsNavbarVisible(false);
       return;
     }
 
     setIsNavbarVisible(true);
   });
 
-  useEffect(() => {
-    if (!hideOnScroll) {
-      return;
-    }
-
-    if (!location.hash) {
-      return;
-    }
-
-    isFocusedAnchor.current = true;
-  }, [location.hash]);
-
   return {
     navbarRef,
     isNavbarVisible,

packages/docusaurus-theme-common/src/utils/useLocationChange.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {useEffect, useRef} from 'react';
+import {useEffect} from 'react';
 import {useLocation} from '@docusaurus/router';
 import {Location} from '@docusaurus/history';
 import {usePrevious} from './usePrevious';
@@ -20,15 +20,8 @@ type OnLocationChange = (locationChangeEvent: LocationChangeEvent) => void;
 export function useLocationChange(onLocationChange: OnLocationChange): void {
   const location = useLocation();
   const previousLocation = usePrevious(location);
-  const isFirst = useRef<boolean>(true);
 
   useEffect(() => {
-    // Prevent first effect to trigger the listener on mount
-    if (isFirst.current) {
-      isFirst.current = false;
-      return;
-    }
-
     onLocationChange({
       location,
       previousLocation,