Building Infinite Scroll in React with useInfiniteQuery
I will share 2 ways to implement infinite scroll in React.
In this post, i will focus more on Tanstack query and if you wanna know more about how i implement with React-virtualized, you can check out the below post.
How i use it differently in my usecase?
Discover => it should update every time so i applied tanstack
Trends => It filter by the number of likes so i should focus on rendering only the visible elements for performance optimization.
Travel => It will get a random location(lat/lng) and then render on the page. i would use tanstack here so if we lose the focus on the browser and revisit, the user can see a new location data.
1. React virtualized
2. @tanstack/react-query with useInfiniteQuery
Tanstack Query with useInfiniteQuery helps with managing and fetching paginated data, react-virtualized specializes in efficiently rendering long lists or grids.