Add debounce
This commit is contained in:
parent
2683ed535d
commit
d90f9db6bb
|
@ -208,6 +208,7 @@ const Footer = ({ headings, currentIndex, link: Link }: ChildProps) => {
|
||||||
const Burger = ({ open, setOpen }: MobileProps) => {
|
const Burger = ({ open, setOpen }: MobileProps) => {
|
||||||
const [prevScrollPos, setPrevScrollPos] = useState(0);
|
const [prevScrollPos, setPrevScrollPos] = useState(0);
|
||||||
const [visible, setVisible] = useState(true);
|
const [visible, setVisible] = useState(true);
|
||||||
|
const debouncedPrevScrollPos = useDebounce<number>(prevScrollPos, 100);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleScroll = () => {
|
const handleScroll = () => {
|
||||||
|
@ -216,8 +217,8 @@ const Burger = ({ open, setOpen }: MobileProps) => {
|
||||||
|
|
||||||
// set state based on location info (explained in more detail below)
|
// set state based on location info (explained in more detail below)
|
||||||
setVisible(
|
setVisible(
|
||||||
(prevScrollPos > currentScrollPos &&
|
(debouncedPrevScrollPos > currentScrollPos &&
|
||||||
prevScrollPos - currentScrollPos > 70) ||
|
debouncedPrevScrollPos - currentScrollPos > 70) ||
|
||||||
currentScrollPos < 10
|
currentScrollPos < 10
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -227,7 +228,7 @@ const Burger = ({ open, setOpen }: MobileProps) => {
|
||||||
window.addEventListener("scroll", handleScroll);
|
window.addEventListener("scroll", handleScroll);
|
||||||
|
|
||||||
return () => window.removeEventListener("scroll", handleScroll);
|
return () => window.removeEventListener("scroll", handleScroll);
|
||||||
}, [prevScrollPos, visible]);
|
}, [debouncedPrevScrollPos, visible]);
|
||||||
|
|
||||||
const line1 = open ? styles.burgerLineOpen1 : styles.burgerLineClosed1;
|
const line1 = open ? styles.burgerLineOpen1 : styles.burgerLineClosed1;
|
||||||
const line2 = open ? styles.burgerLineOpen2 : styles.burgerLineClosed2;
|
const line2 = open ? styles.burgerLineOpen2 : styles.burgerLineClosed2;
|
||||||
|
@ -288,3 +289,17 @@ function useOutsideAlerter(
|
||||||
};
|
};
|
||||||
}, [ref, setOpen]);
|
}, [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;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue