Add debounce

components/OrganizedContent.tsx

@@ -208,6 +208,7 @@ const Footer = ({ headings, currentIndex, link: Link }: ChildProps) => {
 const Burger = ({ open, setOpen }: MobileProps) => {
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
+  const debouncedPrevScrollPos = useDebounce<number>(prevScrollPos, 100);
 
   useEffect(() => {
     const handleScroll = () => {
@@ -216,8 +217,8 @@ const Burger = ({ open, setOpen }: MobileProps) => {
 
       // set state based on location info (explained in more detail below)
       setVisible(
-        (prevScrollPos > currentScrollPos &&
-          prevScrollPos - currentScrollPos > 70) ||
+        (debouncedPrevScrollPos > currentScrollPos &&
+          debouncedPrevScrollPos - currentScrollPos > 70) ||
           currentScrollPos < 10
       );
 
@@ -227,7 +228,7 @@ const Burger = ({ open, setOpen }: MobileProps) => {
     window.addEventListener("scroll", handleScroll);
 
     return () => window.removeEventListener("scroll", handleScroll);
-  }, [prevScrollPos, visible]);
+  }, [debouncedPrevScrollPos, visible]);
 
   const line1 = open ? styles.burgerLineOpen1 : styles.burgerLineClosed1;
   const line2 = open ? styles.burgerLineOpen2 : styles.burgerLineClosed2;
@@ -288,3 +289,17 @@ function useOutsideAlerter(
     };
   }, [ref, setOpen]);
 }
+
+function useDebounce<T>(value: T, delay?: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}