Bi-direction infinite scroll table with maxPages - uncontrolled scroll
Goal I would like to build a table with bi-directional infinite scroll where only a few pages are stored in the cache at a time. So as a user scrolls both up or down, more rows are fetched when the user scrolls to the top or bottom and the newly fetched rows replace old rows in the cache.
Problem When I use
maxPages to control the cache size, I encounter an issue with scrolling. On scrolling up/down, sometimes the table continues to scroll well beyond how much I actually scrolled on my mouse wheel. It's as though the browser takes over and decides it's going to keep on scrolling until it hits the end of the table. If I don't set a maxPages argument though, the scroll behavior is as I expect. That is, the table scrolls based on how far I scroll, and doesn't get caught in a continuous scroll.
Reprex I have a code sandbox that illustrates the problem. Commenting/uncommenting maxPages (no other changes) results in the two different scroll behaviors.
I really appreciate any help or guidance anyone can provide. Thanks!3 Replies
sunny-green•2y ago
useEffect never disappoints 😂
not sure why it fires 50 times....
I've tried to move to
onChange of useInView, which usually works better: https://codesandbox.io/p/devbox/bi-directional-infinite-scroll-table-with-maxpages-forked-gdqw54
but in this case, it kinda doesn't fetch at all sometimes
okay, it's rather simple: it fires because isFetching transitions from true to false, but when isFetchinggoes to false, the intersection obser still says isInView: true. You can actually see your effect firing multiple times without maxPages too
I think with maxPages, the div stays in view more, not totally sureconstant-blueOP•2y ago
Ah OK, so it's fetches and once it's done
isInView is still true so it wants to fetch again. And this repeats.sunny-green•2y ago
yes; the
onChange callback is a lot better because it only fires once