Not calling next function on long screens

[ardeshiir]

When the window is zoomed out and the component is initialized the component will stuck on loading wont call the next function

[tofiqquadri]

@finishedcoot I still have this issue. What's the fix?

[techwithanirudh]

@finishedcoot I'm having the same issue? What's the fix?

[techwithanirudh]

@finishedcoot How could I use your fork without having yarn installed?

[ardeshiir]

@techwithanirudh @tofiqquadri Temporarily you can install the package by changing your package.json to be like this and reinstall the module.
But I recommend to change it back after the maintainer fixed this issue ASAP.

"react-infinite-scroll-component": "git+https://github.com/Stacrypt/react-infinite-scroll-component",

[LibardoVega]

hola yo pude resolver el hecho que no llame a la función "next", lo que me daba error era usar el componente dentro de una etiqueta que usara "Overflow: auto"

[LibardoVega]

acabe de revisar bien la documentación y hace falta el "scrollableTarget" con eso ya pude usar el "Overflow: auto"

[tofiqquadri]

I avoided using this library since it has this major bug open and it has not yet solved.

Instead of this I used IntersectionObserver and implemented the functionality of this library myself.

[kimkong88]

I am too waiting on this!

[Fernando-Hooklab]

I'm having the same issue!

[kimkong88]

I'm having the same issue!

my workaround was just to fetch enough data for single page OR have each item card large enough to fit scroll.. OR load more manually(not waiting for scroll to reach the bottom) based on height

[ryanschiang]

Issue still persists. See this codepen for example: https://codesandbox.io/s/amazing-hermann-x2qw8m?file=/src/index.js

Unfortunately this cripples the library for anything besides simple/single-page infinite scroll apps.

[ryanschiang]

Here's my workaround InfiniteScroll component, using IntersectionObserver:

interface InfiniteScrollProps {
  load: () => void;
  hasMore: boolean;
  loader: React.ReactNode;
  children?: React.ReactNode;
  endMessage?: React.ReactNode;
}

export const InfiniteScroll: React.FC<InfiniteScrollProps> = ({
  load,
  hasMore,
  loader,
  children,
  endMessage,
}) => {
  const sentinelRef = useRef<HTMLDivElement>(null);
  const observerRef = useRef<IntersectionObserver | null>(null);

  const handleIntersect = useCallback(
    (
      entries: IntersectionObserverEntry[],
      observer: IntersectionObserver
    ) => {
      // Check if the sentinel element is intersecting, and if so, call the load function
      if (entries[0].isIntersecting && hasMore) {
        load();
      }
    },
    [load]
  );

  useEffect(() => {
    // Create a new IntersectionObserver when the component mounts
    observerRef.current = new IntersectionObserver(handleIntersect, {
      root: null,
      rootMargin: "0px",
      threshold: 1.0,
    });

    // Attach the observer to the sentinel element
    if (sentinelRef.current) {
      observerRef.current.observe(sentinelRef.current);
    }

    // Clean up the observer when the component unmounts
    return () => {
      if (observerRef.current) {
        observerRef.current.disconnect();
      }
    };
  }, [load]);

  useEffect(() => {
    // When the hasMore prop changes, disconnect the previous observer and reattach it to the new sentinel element
    if (observerRef.current && sentinelRef.current) {
      observerRef.current.disconnect();
      observerRef.current.observe(sentinelRef.current);
    }
  }, [hasMore]);

  return (
    <div>
      {children}
      <div ref={sentinelRef}>{hasMore && loader}</div>
      {!hasMore && endMessage}
    </div>
  );
};

[eamador]

You can workaround this issue with a hook, check the following response

#391 (comment)

[fridaystreet]

IntersectionObserver

any chance you could expand on that a bit?

[Zemelia]

I applied the following workaround, which has worked well so far.

const myRef = useRef<HTMLDivElement>(null);

useLayoutEffect(() => {
  const element = myRef.current;
  if (
    hasMore &&
    element?.firstChild &&
    element?.clientHeight >= element?.scrollHeight
  ) {
    const resizeObserver = new ResizeObserver((entries) => {
      if (entries[0].target.clientHeight <= element.clientHeight) {
        element.dispatchEvent(new CustomEvent('scroll'));
      }
    });

    resizeObserver.observe(element.firstChild as Element);
    return () => resizeObserver.disconnect();
  }
}, [hasMore]);

return (
  <div id="scroller-wrapper" ref={myRef}>
    <InfiniteScroll
      dataLength={dataLength}
      next={moreData}
      hasMore={hasMore}
      scrollThreshold="50px"
      scrollableTarget="scroller-wrapper"
    >
      {children}
    </InfiniteScroll>
  <div>
)