Infinite scroll with duplicate data?
I'm building a React Native app with infinite scroll but I have concerns about duplicate data.
Say we are currently on "page 5" of our query, and each "page" has 10 elements, we currently have elements 40-50.
If the user waited on this screen for a few hours, and didn't do anything, and in the meantime, other users made a bunch of posts to a newsfeed, when our user scrolls down, triggering page 6, won't the API return elements we've already seen? Since new posts were made, they all the posts down.
This would result in duplicate posts getting rendered in our list.
4 Replies
national-gold•15mo ago
In this case your backend should provide a way to fetch elements after the last one you fetched.
It really depends on your data though. For example if you have something like event feed, after parameter could be the timestamp of the last fetched item.
ratty-blushOP•15mo ago
Thanks, I read about something called cursor pagination which sounds similar to what you describe
Preliminarily we are probably just going to load in the feed data by timestamp so it sounds like we want to do what you described
national-gold•15mo ago
Yup "cursor" is exactly what I meant, forgot the proper name. useInfiniteQuery makes it trivial to implement as well
Timestamp should work. You could also use auto incrementing "id" if you have it.
ratty-blushOP•15mo ago
Thanks 🙂