Implementing infinite scroll with FlatList
pagination with FlatList.
use onEndReached with onEndReachedThreshold to fetch the next page, append results, and show a footer loader; guard with a loading flag to prevent duplicate fetches.
What's really being asked
Whether you can wire FlatList pagination correctly and anticipate the well-known pitfall where onEndReached fires multiple times and loads pages repeatedly.
The full answer
Use the onEndReached callback, which fires when the user scrolls within onEndReachedThreshold of the list's end; the threshold is expressed in units of visible length, so a value like 0.5 triggers half a screen from the bottom. In the handler, fetch the next page using a tracked page or cursor, then append the results to the existing data array rather than overwriting it. Show progress with ListFooterComponent rendering a spinner while fetching. The essential guard is a loading flag: bail out of onEndReached if a request is already in flight, and also stop once the server indicates there are no more pages, so you do not hammer the API. Reset state for pull-to-refresh.
The mistakes people make
Omitting the in-flight guard, so onEndReached fires several times during a fling and launches overlapping requests, producing duplicate or out-of-order items. Replacing data instead of appending, which discards earlier pages. Forgetting to stop at the last page, looping requests forever. Setting onEndReachedThreshold too high, triggering loads far too early. Not handling errors, leaving a perpetual spinner.
What usually comes next
Why might onEndReached fire on initial mount with little data, and how do you prevent it? How does this differ with a library like React Query's infinite queries? How do you dedupe items if the backend returns overlaps?
A concrete example
A feed keeps items, page, isLoading, and hasMore in state. onEndReachedThreshold is 0.5. loadMore checks if isLoading or not hasMore and returns early; otherwise it sets isLoading true, fetches page plus one, appends the results, increments page, sets hasMore from the response, and clears isLoading. ListFooterComponent shows a spinner while isLoading. The guard ensures a fast scroll to the bottom triggers exactly one request, not five, and the list grows page by page until the server reports no more results.
Interview question
Why does infinite scroll often load the same page multiple times, and how is it prevented?
- a.Increasing onEndReachedThreshold to 1 eliminates duplicate loads
- b.FlatList caches pages, so duplicates come from the server only
- c.onEndReached can fire repeatedly during a scroll; an in-flight loading guard prevents overlapping fetchesCorrect
- d.onEndReached only fires once, so the bug is impossible
Why? this is the answer
onEndReached can fire several times near the end during a fling. Without a loading or hasMore guard, each fire starts a fetch, duplicating pages. The guard ensures one request at a time.
Just read this? Test yourself on what you have been reading.
Read the original → reactnative.dev
- #react-native
- #flatlist
- #pagination
- #infinite-scroll
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react-native — each one lists the topics its interview covers.
See open roles