Function InfiniteScroll

src/index.tsx:130–459

({
  next,
  hasMore,
  children,
  loader,
  scrollThreshold = 0.8,
  endMessage,
  style,
  height,
  scrollableTarget,
  hasChildren,
  inverse = false,
  pullDownToRefresh = false,
  pullDownToRefreshContent,
  releaseToRefreshContent,
  pullDownToRefreshThreshold = 100,
  refreshFunction,
  onScroll,
  dataLength,
  initialScrollY,
  className = '',
  role,
  tabIndex,
  id,
  ...ariaProps
}: Props)

}

export default function InfiniteScroll({
  next,
  hasMore,
  children,
  loader,
  scrollThreshold = 0.8,
  endMessage,
  style,
  height,
  scrollableTarget,
  hasChildren,
  inverse = false,
  pullDownToRefresh = false,
  pullDownToRefreshContent,
  releaseToRefreshContent,
  pullDownToRefreshThreshold = 100,
  refreshFunction,
  onScroll,
  dataLength,
  initialScrollY,
  className = '',
  role,
  tabIndex,
  id,
  ...ariaProps
}: Props) {
  const [showLoader, setShowLoader] = useState(false);
  const [pullToRefreshThresholdBreached, setPullToRefreshThresholdBreached] =
    useState(false);
  // State drives the JSX re-render when height is measured; ref is read by handlers
  const [maxPullDownDistance, setMaxPullDownDistance] = useState(0);

  const infScrollRef = useRef<HTMLDivElement>(null);
  const sentinelRef = useRef<HTMLDivElement>(null);
  const pullDownRef = useRef<HTMLDivElement>(null);

  // --- Stable callback refs ---
  // Assigned synchronously every render so effects and event handlers always call
  // the latest version without adding the functions to any effect dependency array.
  // This prevents the IO observer and PTR listeners from being recreated every time
  // consumers pass inline functions (the most common real-world usage).
  const nextRef = useRef(next);
  nextRef.current = next;

  const refreshFunctionRef = useRef(refreshFunction);
  refreshFunctionRef.current = refreshFunction;

  // Ref for pullDownToRefreshThreshold so onMove always reads the current value
  // without needing it in the PTR effect deps
  const pullThresholdRef = useRef(pullDownToRefreshThreshold);
  pullThresholdRef.current = pullDownToRefreshThreshold;

  // --- Mutable refs — never trigger re-renders ---
  const actionTriggeredRef = useRef(false);
  const draggingRef = useRef(false);
  const startYRef = useRef(0);
  const currentYRef = useRef(0);
  const maxPullDownDistanceRef = useRef(0); // kept in sync with maxPullDownDistance state