Efficiently Render 100,000 Rows in React

แชร์
ฝัง
  • เผยแพร่เมื่อ 21 ต.ค. 2024

ความคิดเห็น • 49

  • @ivandamyanov
    @ivandamyanov 6 หลายเดือนก่อน +4

    Thanks for the video I'm happy to know about this package for my future use cases and I think you explained all the basics a beginner might need, in an easy to understand manner.

  • @zerdnelemo
    @zerdnelemo 6 หลายเดือนก่อน +4

    I used react-window in the past. Virtuoso is really a big improvement.

  • @nikhilarya7712
    @nikhilarya7712 3 หลายเดือนก่อน

    Good quality content, loved the explanation with example, thanks.

  • @Ray-ko6cw
    @Ray-ko6cw 4 หลายเดือนก่อน

    Thank you so much, I've been looking for this

  • @abhinavkumarsingh_0365
    @abhinavkumarsingh_0365 6 หลายเดือนก่อน

    Was looking for exactly this

  • @incarnateTheGreat
    @incarnateTheGreat 6 หลายเดือนก่อน

    Very cool. Thanks for sharing!

  • @bsw4245
    @bsw4245 6 หลายเดือนก่อน

    absolute goldmine

  • @PoojaGera-l2r
    @PoojaGera-l2r 2 หลายเดือนก่อน

    thankyou so much for this video!

  • @kevyyar
    @kevyyar 6 หลายเดือนก่อน +1

    Hello Cosden! I've been eagerly following your React course updates, and I must say, it’s precisely what I've been looking for to advance my skills. I am currently on the job hunt, either in Argentina or remotely. Unfortunately, my current financial situation doesn't allow me to enroll in your course at its full price. I am deeply committed to learning and growing in this field, and I wonder if there might be any scholarships, discounts, or alternative options available that could assist me in accessing this invaluable resource? Thank you for understanding my brother.

  • @harag9
    @harag9 6 หลายเดือนก่อน +1

    Great video, thanks for that.

  • @mocastello9253
    @mocastello9253 6 หลายเดือนก่อน

    great video! thank you so much!

  • @ahmadbenchakhtir5787
    @ahmadbenchakhtir5787 6 หลายเดือนก่อน +4

    First Thank u, second actually I wish that we could do it without any library... sometimes i hate the idea that most of the things we use a library for.

    • @matrioxplayz1607
      @matrioxplayz1607 6 หลายเดือนก่อน +3

      you probably could, however it would take a lot of effort and you would end up making what is essentially a library

    • @ahmadbenchakhtir5787
      @ahmadbenchakhtir5787 6 หลายเดือนก่อน

      @@matrioxplayz1607 Agree Agree, on one side you're right. but this -Building ur own- will push your skills and your logical thinking add to this usually u will not need to all the functionality of the library. I don't say that the library approach is bad... It's a trade off with personal preference. Thank u.

    • @shivamjainn
      @shivamjainn 6 หลายเดือนก่อน +1

      ​@@ahmadbenchakhtir5787 ofcourse it will push your skill , but reinventing the wheel is just pure insanity . You could read the code from library instead and also contribute. As for skills , i agree with you point. But doing this isn't helping u anyways so why try

    • @andy_lamax
      @andy_lamax 6 หลายเดือนก่อน

      It's not about reinventing the wheel, its about understanding how the library works. Just using a library and not knowing its internals tends to not put a boost on one's skillset

    • @trejohnson7677
      @trejohnson7677 หลายเดือนก่อน

      @@andy_lamaxthe reality is building and maintaining a virtualization solution would eat up a majority of your career. you can mine for gold or be a jeweler. choose.

  • @geforcesong
    @geforcesong 6 หลายเดือนก่อน +1

    what if the user component has dynamic height, it could be different height in different cases, does Virtuoso handle this?

  • @mohamedsalimbensalem6118
    @mohamedsalimbensalem6118 6 หลายเดือนก่อน +1

    thanks for the video ^^

  • @Presidentum
    @Presidentum 6 หลายเดือนก่อน +1

    Very interesting video!!! It seems like an alternative to tanstack query, no? What are the pros and cons of it against TQ?

    • @cosdensolutions
      @cosdensolutions  6 หลายเดือนก่อน +2

      They are different things! This is a rendering optimization, RQ is a data fetching lib!

    • @HenryBabbage
      @HenryBabbage 6 หลายเดือนก่อน

      I think OP is referring to Tanstack Virtual, which handles list virtualization. Also curious how these two libs compare@@cosdensolutions

  • @hassanad94
    @hassanad94 6 หลายเดือนก่อน

    I have a question. Currently you set a fixed hight, what if dont want fix height. What if i want to set 100%?
    So that i can use anywhere.
    (I dont want to set it as a prop)
    Pls can you help?

  • @ayushkarki1880
    @ayushkarki1880 4 หลายเดือนก่อน

    Thanks for the video. Is there any way to configure when fetchNextPage is called. I have a scenario where the rows loaded doesn't occupy the container height in first three set's of data. This lead to not calling endReached callback even after there is next set of data.

  • @darkshadowgks
    @darkshadowgks 5 หลายเดือนก่อน

    normally with the table, people will have to able to search on it, can this do so? can you show to us how search (example search particular name) works on this?

  • @sounakmandal
    @sounakmandal 6 หลายเดือนก่อน

    In a large table, generally we have pagination in the table itself where we anyways display a single page of fixed size and fetch the next page when the user manually moves to the next page. In this case, is there any advantage to this approach?

    • @cosdensolutions
      @cosdensolutions  6 หลายเดือนก่อน +1

      it all depends on how you want to do it. As long as you load paginated data and not all at once, you are good!

  • @sarthakagarwal014
    @sarthakagarwal014 6 หลายเดือนก่อน

    Thanks for the video, but here one question arises is that what if we have that large amount of image along with text. Will it work or do we need to choose other way?

  • @moghariyarahul5723
    @moghariyarahul5723 6 หลายเดือนก่อน

    Hey bro, i am building a chat app and it has aa lot of dynamic content so how can i use it?

  • @codernelly34
    @codernelly34 6 หลายเดือนก่อน +1

    Please Sir am just from watching your video on react Context api but i have a problem i have created a context api where the context value is set in the login page and the value is displayed in the home page it works fine but when the home page is refresh the value of the context became undefined why please help am a beginner

    • @immipixediter210
      @immipixediter210 6 หลายเดือนก่อน

      u can use 'emittor' package
      npm i emittor

    • @zerdnelemo
      @zerdnelemo 6 หลายเดือนก่อน +2

      Context is in-memory storage. When you refresh your page in the browser, everything is reset. If you want to persist data between refresh, you should store it somewhere, like local storage, per instance.

    • @victormanuelalonsoramirez8358
      @victormanuelalonsoramirez8358 6 หลายเดือนก่อน +1

      If You want to persit data you need to use localstorage

  • @VidoviDroga
    @VidoviDroga 6 หลายเดือนก่อน

    Is it ok to use this with nextjs 14?

  • @Lyric-w1r
    @Lyric-w1r 6 หลายเดือนก่อน

    do you use vim ou vscode?

    • @cosdensolutions
      @cosdensolutions  6 หลายเดือนก่อน +2

      Vscode with vim bindings

  • @FaintArt
    @FaintArt 6 หลายเดือนก่อน

    observer api? pagination?

  • @iamTLC
    @iamTLC 6 หลายเดือนก่อน

    any reason not to use tanstack virtual?

    • @cosdensolutions
      @cosdensolutions  6 หลายเดือนก่อน

      there's not just one way to do things ☺️

  • @ricohumme4328
    @ricohumme4328 6 หลายเดือนก่อน

    So how does this library compare to the Flatlist implementation?

    • @cosdensolutions
      @cosdensolutions  6 หลายเดือนก่อน

      its very similar actually. FlatList implements virtualization as well

  • @AkoMawlood
    @AkoMawlood 6 หลายเดือนก่อน +1

    Like

  • @immipixediter210
    @immipixediter210 6 หลายเดือนก่อน

    npm i emittor

  • @nickwoodward819
    @nickwoodward819 6 หลายเดือนก่อน

    But *why* 😄