v7.0 stops working if holding "End" key #429

Activity

1. justanotheranonymoususer commented on May 2, 2026

   

   justanotheranonymoususer

   on May 2, 2026

   Author

   More actions

   Adding this as a workaround worked for me:

     // IntersectionObserver fires only when the sentinel transitions across
     // threshold 0; holding End keeps it continuously inside the trigger zone so
     // the hook stops firing. A scroll listener catches each browser-applied
     // scroll (one per End keypress) and chains the next batch.
     const totalCount = myData.length;
     useEffect(() => {
       const root = document.getElementById('MyContentWrapper'); // scrollableTarget
       if (!root) {
         return;
       }
       const handleScroll = () => {
         if (root.scrollHeight - (root.scrollTop + root.clientHeight) > root.clientHeight) {
           return;
         }
         setInfiniteScrollLoadedItems((prev) =>
           prev < totalCount ? Math.min(prev + 30, totalCount) : prev
         );
       };
       root.addEventListener('scroll', handleScroll, { passive: true });
       return () => root.removeEventListener('scroll', handleScroll);
     }, [totalCount]);
2. iamdarshshah commented on May 2, 2026

   

   iamdarshshah

   on May 2, 2026

   Collaborator

   More actions

   Thanks for the detailed report and the correct intuition on the root cause!

   This is a confirmed bug. The IntersectionObserver only fires on intersection changes, not the current state. When new data loads while the sentinel is already visible, Effect 2a resets the load guard but the IO never re-fires, leaving the component stuck until the user scrolls away and back. Your workaround (scroll up, then down) triggers a fresh intersection event, which is why it works.

   The fix is straightforward: after resetting the guard on new data, force the IO to re-evaluate by calling observer.unobserve(sentinel) + observer.observe(sentinel) on the existing observer instance. No API changes needed, this would be a patch release.

   If you're interested in contributing a fix, we'd love that and are happy to review a PR. The relevant code is in src/index.tsx, specifically Effect 2a (dataLength dep) and Effect 2b (the IO lifecycle). Happy to give more detail on the approach if it helps.
3. iamdarshshah

   added

   bug

   good first issue

   on May 2, 2026
4. justanotheranonymoususer

   added 2 commits that reference this issue on May 2, 2026

   fix: re-observe sentinel on data load so IO re-fires when still in tr…

   ...

   21cba65

   test: add regression tests for sentinel re-observe on dataLength change

   ...

   f096b39
5. justanotheranonymoususer commented on May 2, 2026

   

   justanotheranonymoususer

   on May 2, 2026

   Author

   More actions

   #430