Loading Your React Data Like This is Awesome

[@vanovich4944]

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

[@joshtriedcoding]

That's a very high praise man. Appreciate ya

[@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)

[@obettaaugustine3383]

Wow, that great!

[@joshtriedcoding]

Man that sounds so interesting. Thanks a lot for sharing this!

[@MisouSup]

yeah I actually thought he would use react-virtual from tanstack. I am trying it on tables in this exact moment, looks promising

[@kool-breez]

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 :)

[@abgnazmisyahirul1360]

Can you share the code snippet if may😅

[@kH-ul4hk]

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!

[@joshtriedcoding]

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

[@tomirodriguez7195]

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!

[@joshtriedcoding]

Good idea man. Cheers

[@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.

[@benjaoliva3383]

Move the ref to the post before the 2 last ones and you will get this effect

[@Vicsory]

I will try it ​@@benjaoliva3383

[@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.

[@joshtriedcoding]

Interesting. Not sure how react-query holds up to that use-case either

[@fullstack_journey]

guess it's only useful for a serp page

[@Arttturslv]

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

[@ngenchev1721]

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.

[@saiyamjain5079]

Thanks a lot. I was wondering why mine does not work, thanks a lot saved me hours.

[@neroptik7882]

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 !

[@joshtriedcoding]

Je ne parle pas français mais je t'apprécie

[@nirjoyhasanantor3149]

I needed this you uploaded in time

[@yangchen1212]

Awesome tutorial! I can't understand the example from the official doc but I can understand yours so easily 😊

[@amershboul9107]

I can't get enough of watching your content ❤

[@joshtriedcoding]

Cheers

[@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!!! 😊

[@DurgeshKr22]

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

[@kdiffin]

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

[@erassylzh5658]

Please make video about how to manage permission on react side (show buttons, components, etc depending on role)

[@savit3r]

It’s either KZbin 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.❤

[@faizanahmed9304]

Thank you Josh!

[@joshtriedcoding]

Appreciate you being such a frequent commenter. Cheers man

[@faizanahmed9304]

@@joshtriedcoding thanks man!

[@noel_vi]

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 !

[@anonymoussloth6687]

I didn't understand why at 11:36 it has to go inside a useEffect? What would happen if it didn't?

[@Sebbe1]

ok, but using next.js you want to fetch data on the server and only use client components for user interaction though?

[@albert21994]

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!

[@ayushjain7023]

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

[@adeemmmm]

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

[@deathdefier45]

Love you man, this is exactly what I needed ❤

[@ExtraTurtle]

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.

[@kaistai]

Great! This deserves ten times more thumbs up. 👍👍👍👍👍👍👍👍👍👍

[@Sahil-cb6im]

My code is not working? is there any repo available?

[@chasehelton5462]

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!

[@speedster784]

Can you make a video about uploading multiple files to s3 bucket using next js new API handlers with presigned url..

[@joshtriedcoding]

Did that: kzbin.info/www/bejne/r6aXfH6jg6uaaLs I recommend creating these AWS policies yourself on the edge, makes for very quick response times compared to using the gigantic AWS SDK

[@adolfjamesurian6510]

what is the keyboard shortcut for that? 1:47?

[@harag9]

Since he already typed out the code and deleted them his shortcut is ctrl-z for UNDO

[@keshavakumar9828]

I was actually looking up for a pagination Tut and you dropped one. Quick question RTKQ vs tanstack which one do you use often

[@Ranjeetvishwakarma-72]

why are u using Yarn instead of NPM ? Does Yarn Provide us some more efficiency?

[@lickey8919]

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

[@shanuflash5773]

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.

[@shanuflash5773]

@@安全保密 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

[@nicolasmoises2720]

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

[@joshtriedcoding]

Appreciate ya

[@rowinc1704]

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 ?

[@leonardojaques6586]

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?

[@rohitkharche7562]

Loved this one, now how will this be integrated with tanstack-table library to render out posts in the table ?

[@joshtriedcoding]

Seems like tables are a big part of the conversation in these comments. I'll take it as a video suggestion

[@rohitkharche7562]

@@joshtriedcoding Yes, thankyou for replying back. Will love if you cover this

[@widurahasta9473]

Can you show how to implement infinite scrolling for load old chat data? I'm so confused to implement😂

[@rajfekar4839]

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

[@darkmift]

Please link the code...makes it easier to review

[@rockNbrain]

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?

[@simarmalhotra7319]

I think for pagination you NEED to use hooks which in only possible on the client side as per next13

[@rockNbrain]

@simarmalhotra7319 I was wondering if it is possible to do using link tags and changing only the inner layout with the data ?

[@simarmalhotra7319]

@@rockNbrain possibly i havent tried it myself but using hooks seems like th easier and more consistent opt

[@a7zz]

Can't wait for the brave enough youtuber/someone on twitter to post an opinionated way to paginate using sever components & javascript 👀

[@ralexand56]

That's beautiful! Thanks.

[@joshtriedcoding]

Cheers

[@real23lions]

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)

[@joshtriedcoding]

There is a perfect solution, it's called "React textarea autosize" lol

[@real23lions]

@@joshtriedcoding you're a GOAT. thanks for helping me as a new web dev for the past 3 months. i've learned a lot.

[@meijichocolate7540]

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?

[@joshtriedcoding]

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 :)

[@meijichocolate7540]

@@joshtriedcoding Thats one of the approaches I had been considering. Thanks and I will be looking forward to the next video!

[@Shubham-yc6nz]

​@@joshtriedcodingyeah this tutorial would be great 🎉🎉

[@mathiasriissorensen6994]

This was very helpful. Thank you!

[@reynaldlamury4772]

Is this react query library?

[@airixxxx]

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.

[@Anteater23]

Yes, using a limit and offset on your SQL query

[@Mental-Maniac]

will this work inside a section of an HTML card that is something like 500PX200px?

[@saputrauta09]

is this only exist in app router?

[@John-Dennehy]

Great content as always. One question though; isn't it best practice to move mapped components into their own separate component?

[@Shubham-yc6nz]

It is. But for learning purpose simplicity might be he added together

[@dileepa-mn2to]

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

[@billyfigueroa1617]

Bro holdup. What plugin are you using to increment values when you duplicate a line lol Anybody know? That’s 🔥

[@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 ❤🕵️‍♀️👍🙏

[@TheArmenianSolider65]

I can't find this project on your github

[@ПавелПитерский-д7г]

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)

[@matysw]

is this possible to do in react native?

[@andrescaro_16]

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

[@minocs]

Why not just conditionally set the ref on the div instead of returning a duplicate div with the ref?

[@flavkaa2017]

This is beautiful technique!

[@yagelProject]

Very cool! Can you make the same video, only for next 13+ sanity? I can't find examples with infinite loading for sanity.

[@joshtriedcoding]

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

[@Abhishek-fw7oo]

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

[@rdx-3724]

Please make a playlist on Scalability and microservices Love from India ❤❤

[@joshtriedcoding]

Cheers dude

[@harelpanker]

Hi Josh thank you, really nice... do you think it's SEO friendly?

[@brain5853]

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.

[@Euquila]

Do apps need to be SEO friendly beyond the marketing site? Perhaps this is an application the user sees only after they sign in.

[@harelpanker]

​@@Euquila I'm talking precisely about "applications" that need to be SEO friendly like marketing sites...

[@mortezarostami3287]

Great job! really useful content :)

[@peter042]

JOSHHH, HELP MEEE. Sry, so: how do I do this infinite query in upstash?

[@gkkkk7507]

where can i find the code?

[@keshawnsmith320]

Are you running windows 10 or 11 because your taskbar layout has me soooo jealous.

[@harag9]

The icons in the middle on the taskbar is win 11

[@MrPogi-lf5gz]

Please share github link as well.

[@Ali-rz6bn]

Goat

[@joshtriedcoding]

cheers man

[@AboIbrahem_DAA]

😢😢 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 ??

[@anasouardini]

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) :).

[@Shahzad12145]

Great Job👍👍

[@mohitcodeswell]

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

[@joshtriedcoding]

Whoever told you that might not be a reliable source of information, never heard of it

[@mohitcodeswell]

@@joshtriedcodingit's documention is in Chinese and they are the same creators who made any design. Anyways I'm very depressed about its docs .

[@umargulzar2982]

Nice man ❤❤ You are a good teacher ❤❤

[@joshtriedcoding]

Cheers man happy to hear that

[@moeinmac]

you're great! thanks.

[@shekhtausif2811]

Why cant make one project in react you have good understanding

[@joshtriedcoding]

There is going to be a large project soon

[@nolvalir]

ayy p early to the vid love to see it

[@joshtriedcoding]

you a real one

[@MrManafon]

Infinite scrolling is considered bad UX, bad for conversions, and not least, bad for SEO, keep that in mind when doing this.

[@Munch_92]

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…..

[@lickey8919]

Why is infinite scrolling bad ui? It's the same thing as sequential pagination?

[@CGAR_420]

​@@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

[@lestibournesastalsi5466]

​@@lickey8919Most of time contact info will be put in footer, with infinite scrolling user can never reach footer.

[@Anteater23]

@@lickey8919It’s slow to go back to the start if you scrolled far

[@lardosian]

Ah I notice Bitchute does infinite scrolling now that you say it!

[@ifindev]

Thank you!!

[@alwaisy]

I came to know the purpose of the video in the last 3 minutes.

[@anonymousmangalorean]

Hey it's easier to use react-infinite-scroll-component

[@Happyday-nn6rh]

you are awsome

[@nomadshiba]

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"

[@Shubham-yc6nz]

Awesome

[@shayanalijalbani9894]

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.

[@brayanjpm]

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”

[@LarsRyeJeppesen]

You should change the channel name to "josh tried react"

[@div0ky]

Isn’t Tanstack React Query just a wannabe SWR?

[@joshtriedcoding]

It's an awesome standalone solution

[@simonhartley9158]

My understanding is that SWR tries to keep its bundle size small, while React Query has more features and control.

[@div0ky]

@@joshtriedcoding Fair enough, thanks for the reply. Really loving the channel, btw!

[@div0ky]

@@simonhartley9158 Makes sense. I've been using SWR in production extensively and had great results. I may try out React Query a bit.

[@IncomingLegend]

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...

[@niteshbabu5731]

Shouldn't you be checking for index === _posts.length -1?

[@olorunfemidaramola5470]

Shouldn’t it not be if(I === _post.length) I’m confused a bit please

[@yajirushik2871]

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 🫡