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.
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 ?
Very nice video but this will not work if you zoom out the page to the point that the last element doesn't touches the end scree. Then in that scenario load more pages won't fire. And thus the infinite scroll won't work. Just to keep this thing in mind.
those are edge cases, to start with.. why would anyone do that? and in such cases you can just render a "load more" button if the observer is on view the whole time, idk
From a UX pov, you'd want to actually put the observer ref on either one of the items before the last one, or at least make the observer div (though semantically that's ick) before there, so that it starts fetching before the user actually gets to the bottom of the list. Giving the illusion of being a real infinite list instead of one that has to buffer in whenever you get to the bottom. That said, useInview fires when the referenced component is in the viewport, not just when it crosses the bounds. So zooming out the page will still cause it to trigger.
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. ?
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 200000 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?
Wish you told me how to actually use the hook instead of one example. my back-end works way different than watch dummy code you represented so the video was useless to me
please make a video on Best Design Practices with React Query - with custom hooks, where we have a lot of api requests
Include auth context , react router dom too 👀
Very clear and easy to understand. Thank you so much for your dedication to all react developers !
Your explanation was very clear and easy to understand. Thank you!
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.
concise, easy to understand, the best react-query pagination tutorial!
Love your new background!
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
Nested ternaries for the win! :)
Gr8 tutorial as always
Thanks bro! You are the best🤘
That's exactly what I wanted to know, thanks!
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 ?
the react intersection observer returns a ref that will be used to check if its is in view and put to the very last item of a page.
Very important, thanks.
If I could subscribe again, I absolutely would
Thank you. I need this
Any example in TypeScript? The same code can not run in TypeScript.
Great video, thanks. Your volume on the microphone seems a bit low.
How would you Implement by scrolling upwards like messenger app, then refetch old data/message and grows the container upwards?
In this example fetched items are added to the bottom of the list. But in your case we have to add at the top and keep the observer item on the top.
Great video as always.
I wonder why you use status instead of isLoading?
Status works for error and loading, so no need for isLoading and isError
Please make a single video for typescrpit crash course
Very nice video but this will not work if you zoom out the page to the point that the last element doesn't touches the end scree. Then in that scenario load more pages won't fire. And thus the infinite scroll won't work. Just to keep this thing in mind.
those are edge cases, to start with.. why would anyone do that? and in such cases you can just render a "load more" button if the observer is on view the whole time, idk
From a UX pov, you'd want to actually put the observer ref on either one of the items before the last one, or at least make the observer div (though semantically that's ick) before there, so that it starts fetching before the user actually gets to the bottom of the list. Giving the illusion of being a real infinite list instead of one that has to buffer in whenever you get to the bottom.
That said, useInview fires when the referenced component is in the viewport, not just when it crosses the bounds. So zooming out the page will still cause it to trigger.
Will you create a video where you talk about React 19 ? It seems to be very interesting
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. ?
Doesn't this re-renders the whole items that was already fetched
is onSuccess being deprecated from useInfiniteQuery? If so, what is the alternative for onSuccess?
Are you planning to come up with a React course ?
Yeah, coming out in a month!
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 200000 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?
Create a video describing the react server component (RSC)
Than you bro :)
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?
do you know how to create infinite scroll up to load history chat like whatsapp? i'm struggle do it
How can we do this in nextjs 14 server components ?
I mean without reactquery and useEffect
The link to the repository I think it sends to the wrong project
you're right, fixed. Thanks!
Wish you told me how to actually use the hook instead of one example.
my back-end works way different than watch dummy code you represented so the video was useless to me