Infinite Pagination Component With React Query

VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"

In this video I will show you how to build an infinite pagination component with React Query. This component will be able to infinitely load multiple pages of data and show them all together on the screen as the user scrolls through the application. We'll be using Tanstack Query for this as well as react-intersection-observer, which is a library that will help us trigger a fetch of the next page. Enjoy!

[balls]

I watched and read so many tutorials about useInfiniteQuery, none of them explained the details. Thank you so much.

[hamzaeshoul]

Very clear and easy to understand. Thank you so much for your dedication to all react developers !

[gufranlazuardi]

Your explanation was very clear and easy to understand. Thank you!

[penaf]

Nested ternaries for the win! :)
Gr8 tutorial as always

[MarselNz]

That's exactly what I wanted to know, thanks!

[akshatpandey]

please make a video on Best Design Practices with React Query - with custom hooks, where we have a lot of api requests

[imatrules]

What's the best way to handle toggle switches i have a page with a lot of them and i don't like the large amount of states?

[dnguyendev]

concise, easy to understand, the best react-query pagination tutorial!

[jomoc]

I did not know there was such a thing as this. I have implemented the same output, but through a much harder path. :( . new subscriber here

[haghighi]

Instead of using "Chapter X" please use a name that is relevant to each section title so we can jump to a specific part directly. It will be useful especially when we want to go to a specific part of the video without searching all Chapters :D. By the way, The video is so clear and useful. Thanks for making it.

[danielchukwu]

If I could subscribe again, I absolutely would

[mohamedsalimbensalem]

what if we fetched tooo many, the website will become laggy can you do a video how to do virtualization for performance...
and what if the component can dynamically increase in size how can i still impliment the virtualization in this case ?

[worldofkent]

How would you Implement by scrolling upwards like messenger app, then refetch old data/message and grows the container upwards?

[waleedsharif]

Will you create a video where you talk about React 19 ? It seems to be very interesting

[mohamedyamani]

Great video as always.

I wonder why you use status instead of isLoading?

[enriquesalomon]

using the infinite pagination, it is possible to implement it with a react-select? like a scrolling at a bottom will trigger the fetching the nextpage ? and also like searching in the select input if no data found in the cached, it will refecth again to the server side as a searching parameter, the return the data and added to the cached. ?

[enriquesalomon]

I want to ask, in using react-select with reactjs, react query and supabase stack, i want to load all the data from the supabase that is almost of data, the problem is only 1000 is being display in the react-select, as we know displaying large of data into client side may effect performance, and what solution can be use in order to display all tha data in the react-select?

[FatahChan]

Doesn't this re-renders the whole items that was already fetched

[catalincatalin]

Great video, thanks. Your volume on the microphone seems a bit low.

[arpithagm]

is onSuccess being deprecated from useInfiniteQuery? If so, what is the alternative for onSuccess?