infinite scroller hook

useInfiniteScroll.js

import { useRef, useCallback } from "react";

function useInfiniteScroll(doSomething) {
  const ticking = useRef(false);
  const enteredRedZone = useRef(false);

  return useCallback(
    event => {
      if (!ticking.current) {
        event.persist();
        window.requestAnimationFrame(() => {
          const scrollableRange =
            event.target.scrollHeight - event.target.clientHeight;
          if (event.target.scrollTop / scrollableRange >= 0.95) {
            if (!enteredRedZone.current) {
              doSomething();
            }
            enteredRedZone.current = true;
          } else {
            enteredRedZone.current = false;
          }

          ticking.current = false;
        });

        ticking.current = true;
      }
    },
    [doSomething]
  );
}

// const onScroll = useInfiniteScroll(() => console.log("do something"));
// return <div onScroll={onScroll}></div>