Loading Your React Data Like This is Awesome
HTML-код
- Опубликовано: 7 сен 2024
- 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.
My GitHub: github.com/jos...
Discord: / discord
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)
Wow, that great!
Man that sounds so interesting. Thanks a lot for sharing this!
yeah I actually thought he would use react-virtual from tanstack. I am trying it on tables in this exact moment, looks promising
I did the same in the last few months. Although I didn't get around to the dynamic container height. Thanks for mentioning that library, I'll check it out :)
Can you share the code snippet if may😅
Yo, the consistency of your video upload is impressive! One of the best youtube channels on the web out there.
That's a very high praise man. Appreciate ya
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!
It's such a cool concept. Fireship made it very popular and it really is easy to follow as a viewer and leads to less errors during recording
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!
Good idea man. Cheers
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.
Move the ref to the post before the 2 last ones and you will get this effect
Awesome tutorial! I can't understand the example from the official doc but I can understand yours so easily 😊
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 !
Je ne parle pas français mais je t'apprécie
Nice transition between i === _posts.length to i === _posts.length - 1 :D
It is very important to know that indexes starts from 0, and length is the total count not the last index value.
Thanks a lot. I was wondering why mine does not work, thanks a lot saved me hours.
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!!! 😊
It’s either RUclips or you who are watching me because you always upload when I have a problem with my project; WHAT A CLUTCH, bless you man, keep it up.❤
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.
Interesting. Not sure how react-query holds up to that use-case either
guess it's only useful for a serp page
Thanks! I was searching about infinity scrolling without knowing the name of it and I came across your video!
I can't get enough of watching your content ❤
Cheers
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!
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 ❤🕵️♀️👍🙏
I needed this you uploaded in time
Thank you Josh!
Appreciate you being such a frequent commenter. Cheers man
@@joshtriedcoding thanks man!
Please make video about how to manage permission on react side (show buttons, components, etc depending on role)
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!
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)
in 8:19 how did you import using your keyboard the useRef hook ?
I tried to play around with it but I couldn't get it to work, I'd love to know the keys for it.
great video btw, keep it up !
Hello Josh I'm curious if we could make a Skeleton post at the end that is going to be attached to the ref
And the trick is that it's outside of the Map loop and always in the bottom, will that work ?
Really enjoyed the video
man you popping our some great content lately. Keep up the good work
Great video also one can use react-intersection-observer for easy implementation for load more
Love you man, this is exactly what I needed ❤
Great! This deserves ten times more thumbs up. 👍👍👍👍👍👍👍👍👍👍
thanks for the great content bro I cant stop watching every upload
Infinite scrolling is considered bad UX, bad for conversions, and not least, bad for SEO, keep that in mind when doing this.
I know this is the same as the carousel/slider argument.
The issue is though, clients want, what clients want.
Therefore when a client says I want to display all my posts on a page…..
Why is infinite scrolling bad ui? It's the same thing as sequential pagination?
@@lickey8919Because you can't link to the last page. You have to load everything if you want to get to the end
So if your products are sorted A-Z with infinite loading and someone wants a Z product, they need to scroll through everything. Every time they come back
@@lickey8919Most of time contact info will be put in footer, with infinite scrolling user can never reach footer.
@@lickey8919It’s slow to go back to the start if you scrolled far
Real nice, dude.. thanks for the video. I’m brazilian and I love your vídeos.. greatness
Appreciate ya
That's beautiful! Thanks.
Cheers
Please make a playlist on
Scalability and microservices
Love from India ❤❤
Cheers dude
Anyone have video recommendations for infinite scroll tutorial that only uses the intersection lib? Every video uses extra libs and hooks that just arent needed
Can't wait for the brave enough youtuber/someone on twitter to post an opinionated way to paginate using sever components & javascript 👀
I was just thinking about doing an infinite scroll in a table using nextjs and was wondering how to do it. Can't believe the timing for this video. Thanks for the video and keep up the good work!
Btw, if you are using nextjs13, is it better to fetch data this way with react-query or should I find a way to fetch the data using a server component and then pass it do another component to display it somehow?
What I do is fetch the first X posts on the server (so they are immediately rendered in the viewport) and fetch all additional as I show in this video. Works supremely well. Will also be part of the next long-form video :)
@@joshtriedcoding Thats one of the approaches I had been considering. Thanks and I will be looking forward to the next video!
@@joshtriedcodingyeah this tutorial would be great 🎉🎉
This was very helpful. Thank you!
This is really useful. I appreciate it a lot!!
Can you make a video about uploading multiple files to s3 bucket using next js new API handlers with presigned url..
Did that: ruclips.net/video/yu4KKmNFg2Y/видео.html I recommend creating these AWS policies yourself on the edge, makes for very quick response times compared to using the gigantic AWS SDK
you're great! thanks.
I was actually looking up for a pagination Tut and you dropped one.
Quick question RTKQ vs tanstack which one do you use often
why are u using Yarn instead of NPM ? Does Yarn Provide us some more efficiency?
This is beautiful technique!
Can you show how to implement infinite scrolling for load old chat data? I'm so confused to implement😂
Bro holdup. What plugin are you using to increment values when you duplicate a line lol
Anybody know? That’s 🔥
Great content as always. One question though; isn't it best practice to move mapped components into their own separate component?
It is. But for learning purpose simplicity might be he added together
how would I go on doing this the other way? I'm trying to make a chat app, so I want it to only fetch the 5 last messages, and then create new scroll above. instead of below.
So I might be dumb but: when we do mantine/hooks, do I add the whole mantine "thing" or only that hook situation? For example can I use this and shadcn together? Or should I use only mantine if I use their hook?
Great job! really useful content :)
hey, nice job Josh! great content here!!
I would love to see an implementation of a pagination without '''use client' directive, is it possible to have it working only in server components using links?
I think for pagination you NEED to use hooks which in only possible on the client side as per next13
@simarmalhotra7319 I was wondering if it is possible to do using link tags and changing only the inner layout with the data ?
@@rockNbrain possibly i havent tried it myself but using hooks seems like th easier and more consistent opt
Funny enough, the eco-system of React is the only powerful part in react.
Ctrl+C (React's eco-system) => Ctrl+V (Solidjs' eco-system) :).
Why not just conditionally set the ref on the div instead of returning a duplicate div with the ref?
Bro can you make a video about atomica structure of the next project, how the data passing and state handeling throught the atomic componenets, thank you
I didn't understand why at 11:36 it has to go inside a useEffect? What would happen if it didn't?
Does anyone know the easiest way to auto resize textarea in reactjs/ nextjs? I’m surprised that there isn’t a built-in solution for this. (Fyi I’m new and no idea where to find the solution)
There is a perfect solution, it's called "React textarea autosize" lol
@@joshtriedcoding you're a GOAT. thanks for helping me as a new web dev for the past 3 months. i've learned a lot.
will downloading the whole data at the beginning at once not affect performance, how it is cleaner than other approach like applending the array of data upon reaching the end of the page ?
What is short key for copy past { id , title } with increasing manner like post 1, post2
when I try it copy past , id 1 I'd 1, post 1 post1
Can you make a video on implementing redux with nextjs 13.4 and server components?
The Nextjs App router is a new feature that may not work seamlessly with state management tools like SWR, React Query, or Redux. It may take some time for these tools to fully align with the App router. To be safe, it's recommended to avoid using the App router with Redux in a real-world project and conduct thorough testing before implementing it.
@@user-te2pe5qm8o so how do I state manage in next 13 app router
@@shanuflash5773 I am using Next App Router + Zustand + React Query, to be honest, the experience is very bad, there are many bugs, revalidation in fetch and queryClient can not take effect, I have to use router refresh, I use Hydrate to get the current user, but after logging in and waiting for refetch, the login button shows up directly making me have to refresh, I have no idea what's going on.
Warm tip: 13.4.4 is buggy, I returned to 13.4.3
My code is not working? is there any repo available?
Is this react query library?
Nice man ❤❤ You are a good teacher ❤❤
Cheers man happy to hear that
Please link the code...makes it easier to review
will this work inside a section of an HTML card that is something like 500PX200px?
Thank you!!
Don't you think its overkill to implement infinite scroll, we have two install two packages doesn't it increases the size of the application
is this only exist in app router?
Loved this one, now how will this be integrated with tanstack-table library to render out posts in the table ?
Seems like tables are a big part of the conversation in these comments. I'll take it as a video suggestion
@@joshtriedcoding Yes, thankyou for replying back. Will love if you cover this
Very cool! Can you make the same video, only for next 13+ sanity? I can't find examples with infinite loading for sanity.
I think making mostly the same video would not be very interesting. This approach isn't database/datalake specific at all, it just comes down (with sanity specifically) to how you query your data using their groq language
Goat
cheers man
Are you running windows 10 or 11 because your taskbar layout has me soooo jealous.
The icons in the middle on the taskbar is win 11
Ah I notice Bitchute does infinite scrolling now that you say it!
Shouldn't pagination be implemented also in the backend? If not, how does React Query manage to get only certain elements and not the whole list.
Yes, using a limit and offset on your SQL query
JOSHHH, HELP MEEE.
Sry, so: how do I do this infinite query in upstash?
Nice vid, bro how do u care your eyes , I say this because i was watching your videos and in all of these you don’t use glasses 👓, what is your “secret”
Hi Josh thank you, really nice... do you think it's SEO friendly?
Well, if we're talking Next JS since just React definitely isn't SEO friendly... If the first batch of data is loaded server-side, that should be visible with SEO. But anything loaded in client afterwards isn't.
Do apps need to be SEO friendly beyond the marketing site? Perhaps this is an application the user sees only after they sign in.
@@Euquila I'm talking precisely about "applications" that need to be SEO friendly like marketing sites...
😢😢 hi if you know fix this problem in next@13.4.4 with next-auth => "
./node_modules/next-auth/next/middleware.js
Module parse failed: Identifier 'NextResponse' has already been declared (3:6)
| "use strict";
| const NextResponse = require("next/dist/server/web/spec-extension/response").NextResponse;
> const NextResponse = require("next/dist/server/web/spec-extension/response").NextResponse;
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
| Object.defineProperty(exports, "__esModule", {
"
how I can fix it ??
is this possible to do in react native?
Great Job👍👍
ayy p early to the vid love to see it
you a real one
dont trust pagination. if you start with the newest content, it becomes problematic when there are newer contents
you should always use "after this id"
I can't find this project on your github
I came to know the purpose of the video in the last 3 minutes.
what is the keyboard shortcut for that? 1:47?
Since he already typed out the code and deleted them his shortcut is ctrl-z for UNDO
Why cant make one project in react you have good understanding
There is going to be a large project soon
where can i find the code?
Please share github link as well.
You should change the channel name to "josh tried react"
Hey it's easier to use react-infinite-scroll-component
Awesome
Hey Josh, have your heard about UMI js. I'm being told you use UMI js. Do you have any idea. Please do tell me
Whoever told you that might not be a reliable source of information, never heard of it
@@joshtriedcodingit's documention is in Chinese and they are the same creators who made any design. Anyways I'm very depressed about its docs .
you are awsome
Can you make a video showing, for instance, how to implement that data fetching method in the SHADCN data table component? When we click the next page button, all the students in the subsequent class will be displayed in addition to the ones we are currently seeing. Keep in mind that there will be 50 to 70 students in each class. As soon as the user scrolls down, I want to collect the remaining students. I currently want to display 10 users.
there are tons of free APIs out there, why do you have to mock one? why not try to apply real world scenarios as much as possible? tutorials like this just seem cheap and lazy...
Isn’t Tanstack React Query just a wannabe SWR?
It's an awesome standalone solution
My understanding is that SWR tries to keep its bundle size small, while React Query has more features and control.
@@joshtriedcoding Fair enough, thanks for the reply. Really loving the channel, btw!
@@simonhartley9158 Makes sense. I've been using SWR in production extensively and had great results. I may try out React Query a bit.
Shouldn't you be checking for index === _posts.length -1?
Shouldn’t it not be if(I === _post.length) I’m confused a bit please
I have started learning TS recently and decided to build app with it... who could think it will create a real hell for my already created infinite scroll functionality for jsx... anyway after 4 hours I haven't fixed that so I'm here 🫡