Loading Your React Data Like This is Awesome

What if you want to display large amounts of data inside your React App? What if you don't know how much data there will be to display? If you're mapping over data, consider using infinite scrolling to load your data. This is the cleanest infinite scrolling/pagination approach I know of.

[Winslow_Tech]

Great work! After this, you can add virtualization with libraries like react-window or TanStack's "useVirtual" hook so that you don't run out of memory scrolling through hundreds of complex react components!

I used this in a real-world medical application both for viewing large lists of data and inside a complex table I built on top of MaterialUI.

A tricky part was keeping the height of the container dynamic and still able to virtualize properly with good UX so I ended up using a combination of react-virtualized-auto-sizer to measure the container then use it as the height and width for useVirtual() to virtualize, useInfiniteQuery() to fetch data every time we get close to the bottom of the container, and the native intersection observer api to calculate when the user was nearing the last few entries.

Then I turned it all into a reusable table component where you can control all of these parameters with props. One of the more fun front-end components I built! Oh and I actually managed to make all of this work inside Internet Explorer 11 using a polyfill for intersection observer and probably quite a few other things I am forgetting (Yep, that's the medical industry for you)

[vanovich]

Yo, the consistency of your video upload is impressive! One of the best youtube channels on the web out there.

[kH-ulhk]

I love the redoing of the code in the video! A smart way to make the concept quick (not having to type everything out) and also makes it so you have to edit less, nice!

[tomirodriguez]

Excelent content Josh! :)

One thing I like to do is to just render a span at the end of the posts, so that every time it appears on the screen, you call your fetch function.
That way, you don't event have to bother with the last post.

Keep with all this videos!

[DurgeshKr]

man you popping our some great content lately. Keep up the good work

[albert]

this is way better then the implementation I'm using with tranners virtual lists. thank you josh for this consise and no bs helpful video!

[kdiffin]

thanks for the great content bro I cant stop watching every upload

[Arttturslv]

Thanks! I was searching about infinity scrolling without knowing the name of it and I came across your video!

[Luxcium]

The enthusiasm of this gentleman is out of bounds and this is so awesome 🤩 I love how he got the clean haircut just for us haha (probably not)… he is sharp, clever and straight to the point which makes it super addictive to watch those videos!!! 😊

[keymoment]

You deserve to reach 1m subscribers nice content bro . Keep it up as always, I’m impressed with your hard work and dedication to your channel ❤🕵️‍♀️👍🙏

[neroptik]

Sincèrement : video à la fois très "smart" et tellement bien expliquée, il faut avoir autant de talent que d'intelligence pour offrir des connaissances aussi précieuses en seulement quelques minutes, merci à Josh !

[deathdefier]

Love you man, this is exactly what I needed ❤

[amershboul]

I can't get enough of watching your content ❤

[codinginflow]

SWR has a similar hook called useSWRInfinite. However, it stops being useful once you want to let the user add or remove items from the list.

[chasehelton]

Loving your videos bro! Super helpful! Could you eventually make a video covering what software you use to record/edit videos and any tips you have on making videos? I would love to start building in public soon, and I think you do a great job!

[jwbonnett]

I think UX is more important than a bit more strain, load the posts once a user has viewed a couple of posts before, this way the loading would apear seamless to the user.

[andrescaro_]

This is really useful. I appreciate it a lot!!

[nicolasmoises]

Real nice, dude.. thanks for the video. I’m brazilian and I love your vídeos.. greatness

[ayushjain]

Great video also one can use react-intersection-observer for easy implementation for load more

[pcxtgcz]

Good video and clear presentation (as usual I notice in your video)😎 a few comments^
1 there IS a sence to fetch #4 post before will be readen post #3 in order to make scrolling perfectly "seamles" without interuptions for fetching)
2 that video as well as others of this kind 9and even ready to install scrolling components) are all coves infinity scrolling in one directions) But the really tricky task (which I had to solve for my own) when you want to do infinity scroll in both directions (for next and previous pages of data) together with direct jump to the particular page and next 10 /prev 10 button also
so you need somehow plase the users vieport not at the first newly fetched page but at first+1 and do it yet smooth)