Loading Your React Data Like This is Awesome

Поділитися
Вставка
  • Опубліковано 1 січ 2025

КОМЕНТАРІ • 158

  • @Winslow_Tech
    @Winslow_Tech Рік тому +74

    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
      @obettaaugustine3383 Рік тому +1

      Wow, that great!

    • @joshtriedcoding
      @joshtriedcoding  Рік тому +3

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

    • @MisouSup
      @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
      @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
      @abgnazmisyahirul1360 Рік тому +2

      Can you share the code snippet if may😅

  • @vanovich4944
    @vanovich4944 Рік тому +38

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

  • @kH-ul4hk
    @kH-ul4hk Рік тому +11

    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
      @joshtriedcoding  Рік тому +7

      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
    @tomirodriguez7195 Рік тому +8

    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!

  • @Arttturslv
    @Arttturslv Рік тому

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

  • @Luxcium
    @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!!! 😊

  • @neroptik7882
    @neroptik7882 Рік тому +4

    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 !

  • @nirjoyhasanantor3149
    @nirjoyhasanantor3149 Рік тому +1

    I needed this you uploaded in time

  • @yangchen1212
    @yangchen1212 4 місяці тому

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

  • @DurgeshKr22
    @DurgeshKr22 Рік тому

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

  • @kdiffin
    @kdiffin Рік тому

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

  • @amershboul9107
    @amershboul9107 Рік тому +2

    I can't get enough of watching your content ❤

  • @savit3r
    @savit3r Рік тому

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

  • @codinginflow
    @codinginflow Рік тому +7

    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
      @joshtriedcoding  Рік тому +3

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

    • @fullstack_journey
      @fullstack_journey Рік тому

      guess it's only useful for a serp page

  • @jwbonnett
    @jwbonnett Рік тому +9

    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
      @benjaoliva3383 Рік тому +2

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

    • @Vicsory
      @Vicsory 8 днів тому

      I will try it ​@@benjaoliva3383

  • @albert21994
    @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!

  • @ngenchev1721
    @ngenchev1721 Рік тому +3

    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
      @saiyamjain5079 Рік тому +1

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

  • @deathdefier45
    @deathdefier45 Рік тому +1

    Love you man, this is exactly what I needed ❤

  • @nicolasmoises2720
    @nicolasmoises2720 Рік тому

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

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

  • @kaistai
    @kaistai 10 місяців тому

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

  • @ПавелПитерский-д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)

  • @noel_vi
    @noel_vi 7 місяців тому

    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
    @anonymoussloth6687 Рік тому

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

  • @ayushjain7023
    @ayushjain7023 Рік тому +1

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

  • @mathiasriissorensen6994
    @mathiasriissorensen6994 Рік тому

    This was very helpful. Thank you!

  • @faizanahmed9304
    @faizanahmed9304 Рік тому +2

    Thank you Josh!

  • @chasehelton5462
    @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!

  • @erassylzh5658
    @erassylzh5658 Рік тому +2

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

  • @andrescaro_16
    @andrescaro_16 Рік тому

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

  • @ralexand56
    @ralexand56 Рік тому +1

    That's beautiful! Thanks.

  • @mortezarostami3287
    @mortezarostami3287 Рік тому

    Great job! really useful content :)

  • @adolfjamesurian6510
    @adolfjamesurian6510 Рік тому

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

    • @harag9
      @harag9 Рік тому +2

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

  • @Sebbe1
    @Sebbe1 Місяць тому

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

  • @lickey8919
    @lickey8919 10 місяців тому

    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

  • @ExtraTurtle
    @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.

  • @flavkaa2017
    @flavkaa2017 Рік тому

    This is beautiful technique!

  • @adeemmmm
    @adeemmmm 5 місяців тому

    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

  • @umargulzar2982
    @umargulzar2982 Рік тому

    Nice man ❤❤ You are a good teacher ❤❤

  • @speedster784
    @speedster784 Рік тому +1

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

    • @joshtriedcoding
      @joshtriedcoding  Рік тому +1

      Did that: ua-cam.com/video/yu4KKmNFg2Y/v-deo.html I recommend creating these AWS policies yourself on the edge, makes for very quick response times compared to using the gigantic AWS SDK

  • @rowinc1704
    @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 ?

  • @real23lions
    @real23lions Рік тому +1

    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
      @joshtriedcoding  Рік тому +1

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

    • @real23lions
      @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.

  • @rajfekar4839
    @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

  • @leonardojaques6586
    @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?

  • @matysw
    @matysw Рік тому

    is this possible to do in react native?

  • @Sahil-cb6im
    @Sahil-cb6im Рік тому +1

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

  • @Ranjeetvishwakarma-72
    @Ranjeetvishwakarma-72 4 місяці тому

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

  • @keshavakumar9828
    @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

  • @rdx-3724
    @rdx-3724 Рік тому +1

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

  • @meijichocolate7540
    @meijichocolate7540 Рік тому +1

    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
      @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
      @meijichocolate7540 Рік тому

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

    • @Shubham-yc6nz
      @Shubham-yc6nz Рік тому

      ​@@joshtriedcodingyeah this tutorial would be great 🎉🎉

  • @Shahzad12145
    @Shahzad12145 Рік тому

    Great Job👍👍

  • @darkmift
    @darkmift Рік тому +2

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

  • @Mental-Maniac
    @Mental-Maniac Рік тому

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

  • @shanuflash5773
    @shanuflash5773 Рік тому +2

    Can you make a video on implementing redux with nextjs 13.4 and server components?

    • @安全保密
      @安全保密 Рік тому +1

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

  • @billyfigueroa1617
    @billyfigueroa1617 11 місяців тому

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

  • @reynaldlamury4772
    @reynaldlamury4772 4 місяці тому

    Is this react query library?

  • @rockNbrain
    @rockNbrain Рік тому +1

    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
      @simarmalhotra7319 Рік тому

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

    • @rockNbrain
      @rockNbrain Рік тому

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

    • @simarmalhotra7319
      @simarmalhotra7319 Рік тому +1

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

  • @widurahasta9473
    @widurahasta9473 4 місяці тому

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

  • @rohitkharche7562
    @rohitkharche7562 Рік тому

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

    • @joshtriedcoding
      @joshtriedcoding  Рік тому +1

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

    • @rohitkharche7562
      @rohitkharche7562 Рік тому

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

  • @moeinmac
    @moeinmac 8 місяців тому

    you're great! thanks.

  • @dileepa-mn2to
    @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

  • @airixxxx
    @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
      @Anteater23 5 місяців тому

      Yes, using a limit and offset on your SQL query

  • @a7zz
    @a7zz Рік тому +1

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

  • @John-Dennehy
    @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
      @Shubham-yc6nz Рік тому

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

  • @saputrauta09
    @saputrauta09 Рік тому

    is this only exist in app router?

  • @Abhishek-fw7oo
    @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

  • @peter042
    @peter042 Рік тому

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

  • @yagelProject
    @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
      @joshtriedcoding  Рік тому +1

      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

  • @minocs
    @minocs 11 місяців тому

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

  • @harelpanker
    @harelpanker Рік тому

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

    • @brain5853
      @brain5853 Рік тому +1

      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
      @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
      @harelpanker Рік тому

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

  • @gkkkk7507
    @gkkkk7507 Рік тому

    where can i find the code?

  • @TheArmenianSolider65
    @TheArmenianSolider65 Рік тому

    I can't find this project on your github

  • @Ali-rz6bn
    @Ali-rz6bn Рік тому +1

    Goat

  • @AboIbrahem-Sy
    @AboIbrahem-Sy Рік тому

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

  • @keshawnsmith320
    @keshawnsmith320 Рік тому

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

    • @harag9
      @harag9 Рік тому

      The icons in the middle on the taskbar is win 11

  • @ifindev
    @ifindev Рік тому

    Thank you!!

  • @MrPogi-lf5gz
    @MrPogi-lf5gz Рік тому

    Please share github link as well.

  • @anasouardini
    @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) :).

  • @mohitcodeswell
    @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
      @joshtriedcoding  Рік тому

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

    • @mohitcodeswell
      @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 .

  • @shekhtausif2811
    @shekhtausif2811 Рік тому

    Why cant make one project in react you have good understanding

  • @Happyday-nn6rh
    @Happyday-nn6rh Рік тому

    you are awsome

  • @lardosian
    @lardosian Рік тому

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

  • @Shubham-yc6nz
    @Shubham-yc6nz Рік тому

    Awesome

  • @nolvalir
    @nolvalir Рік тому +1

    ayy p early to the vid love to see it

  • @anonymousmangalorean
    @anonymousmangalorean Рік тому

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

  • @nomadshiba
    @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"

  • @brayanjpm
    @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”

  • @alwaisy
    @alwaisy Рік тому

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

  • @MrManafon
    @MrManafon Рік тому +11

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

    • @Munch_92
      @Munch_92 10 місяців тому +1

      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
      @lickey8919 10 місяців тому +2

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

    • @CGAR_420
      @CGAR_420 8 місяців тому

      ​@@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
      @lestibournesastalsi5466 7 місяців тому

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

    • @Anteater23
      @Anteater23 5 місяців тому

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

  • @shayanalijalbani9894
    @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.

  • @LarsRyeJeppesen
    @LarsRyeJeppesen Рік тому

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

  • @div0ky
    @div0ky Рік тому

    Isn’t Tanstack React Query just a wannabe SWR?

    • @joshtriedcoding
      @joshtriedcoding  Рік тому +1

      It's an awesome standalone solution

    • @simonhartley9158
      @simonhartley9158 Рік тому +1

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

    • @div0ky
      @div0ky Рік тому

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

    • @div0ky
      @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
    @IncomingLegend Рік тому +2

    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
    @niteshbabu5731 10 місяців тому

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

  • @olorunfemidaramola5470
    @olorunfemidaramola5470 Рік тому

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

  • @yajirushik2871
    @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 🫡