How to Create Infinite Scroll in React | TanStack React Query

Поделиться
HTML-код
  • Опубликовано: 1 янв 2025

Комментарии • 42

  • @gaganyt7861
    @gaganyt7861 Год назад +3

    I watched a video about paginated queries in React Query three days ago. Since then, I've been trying to learn about infinite scrolling in React Query, but my search on RUclips didn't yield helpful results. I struggled to grasp the concept and even considered switching to another library. Now, coming across this video, it feels like god sent you to make a video about infinte scrolling to help me out.

    • @CandDev
      @CandDev  Год назад

      God bless you bro

  • @yamelamadorfernandez7416
    @yamelamadorfernandez7416 11 месяцев назад +1

    It serves the purpose very well, I came in not knowing about infinite scroll and went out knowing, that is enough for me. Thanks bro.

  • @abdallahazme4757
    @abdallahazme4757 5 месяцев назад

    Your explanation was super smooth, smoother than infinite scrolling itself. Thank you so much, mate, for making this video.

    • @CandDev
      @CandDev  5 месяцев назад +1

      You're welcome!

  • @Mahesh_patidar
    @Mahesh_patidar 3 месяца назад +2

    Your explanation was super smooth thankyou sir 🙌🙌

  • @박찬영-h4z
    @박찬영-h4z 11 месяцев назад

    hello i'm korea developer student !! i've seen many many videos about introduce, your videos really good!!! I appreciate it... maybe i always watching your video everyday

    • @CandDev
      @CandDev  11 месяцев назад

      Hello Korea 👋🏻, thank you so much for your nice comment.

  • @julienheng3880
    @julienheng3880 8 месяцев назад

    Your explanation is very clear and easy to follow through. Please continue to make more tutorials. Thank you very much!

  • @ahmedaq9018
    @ahmedaq9018 Год назад

    this is so clean .... thanks a lot for everything Cand

  • @0xtz_
    @0xtz_ Год назад +2

    Yo thanks man 😂I was looking for this this morning hhhh and now I got it amazing videos keep going

    • @CandDev
      @CandDev  Год назад +1

      Thanks for the RUclips algorithm 😁

  • @denys7567
    @denys7567 Год назад +1

    34:20
    fix me if I'm wrong, but this approach leads to creating item innerRef={ref} for !each! last item for each page. So If you see a content which contains of 3 loaded pages - I will have 3 ref elements, so you will have an incorrect loading, because nextPageLoading will be triggered when you will see on for example the last element of first page (but after it you already loaded items from next 2 pages)

  • @mdkawsarislamyeasin4040
    @mdkawsarislamyeasin4040 10 месяцев назад

    Bro you save my huge time. I was looking for this.

  • @SergieArizandieta
    @SergieArizandieta Год назад

    ty buddy u really help me, other videos has a too complicated code and with gross explanation to explain this subject, ty again I hope u continue with this kind of tutorials :,)

  • @delovoy_mikhail
    @delovoy_mikhail 9 месяцев назад

    братишка, дай бог тебе здоровья. В твоём видео всё что нужно. Внатуе красава!

  • @voldemortvi4264
    @voldemortvi4264 Год назад +1

    amazing video as always !

  • @FaizSultan430
    @FaizSultan430 7 месяцев назад

    thank you so much for deep explanation i was struggling with infinite scrolling in react query
    i watched a lot of videos on youtube but your video is best ❤

    • @CandDev
      @CandDev  7 месяцев назад

      Thank you 🤍

  • @cleverprogrammer7409
    @cleverprogrammer7409 Год назад

    Amazing Amazing I was looking many days thanks alot

  • @leevu12
    @leevu12 7 месяцев назад

    Thank you so much! clear explaination sir

  • @socialultra7219
    @socialultra7219 10 месяцев назад

    thanks dude, this really helped me out

  • @asifkabiremon
    @asifkabiremon Год назад

    This video content is really awesome and helpful to me

  • @ahmedaq9018
    @ahmedaq9018 Год назад

    i've seen many videos for you,, they are always simple, direct and to the point... hopefully you will consider creating a TanStack tutorial where you go through it all in practical way (the same way you do).-- 🥰🥰🥰

  • @xtremeandroidsupport3837
    @xtremeandroidsupport3837 4 месяца назад

    great video thanks !!

  • @divyprakash4052
    @divyprakash4052 9 месяцев назад

    How is it possible to pass functions in use effect dependency

  • @jhonvaron1721
    @jhonvaron1721 11 месяцев назад

    Exelente ejemplo , muchas graciass 🥳

  • @shubhamupadhyay3174
    @shubhamupadhyay3174 9 месяцев назад

    thank you it help me a lot

  • @mdabdullahmamun333
    @mdabdullahmamun333 11 месяцев назад

    i notice that useInfiniteQuery hook render multiple time for on render how can i fix this

  • @letthesuntalk
    @letthesuntalk 10 месяцев назад

    What if I'm using components with imgs and stuff like that, how can I mantain the performance when I scrolled and rendered a lot of items? Thank you :]

  • @banksom2861
    @banksom2861 10 месяцев назад

    Thank you very much

  • @mahamatabakarbechir7324
    @mahamatabakarbechir7324 9 месяцев назад

    Thanks a lot :)

  • @zunnoorainrafi5985
    @zunnoorainrafi5985 Год назад

    brother I have a question,
    I used useInfiniteQuery in nextjs and I am fetching all blog posts in the function of useInfiniteQuery, as our data is coming from {data} = useInfiniteQuery({...}) and we can't use useInfiniteQuery in "server component" so I made my component a "client component" but I want that all my blog posts should be fetched in server component for less initial load content time and i also want infinite scroll on the main page of all blog posts. So how i can do this?

  • @028-manikandan3
    @028-manikandan3 Год назад

    bro initialPageParam name given use query bro its getting error bro why?

  • @o.j1398
    @o.j1398 Год назад

    Nice video, but what about Horizontal infinite scroll?

    • @GenilsonAraújo-w7u
      @GenilsonAraújo-w7u 11 месяцев назад +1

      Just display flex and I think it will work good!

  • @Hunterhuni
    @Hunterhuni Год назад

    Hey, really nice video, I really appreciate it. Just one question: How would I achieve the same thing but in reverse order? Meaning the list starts from the bottom and whenever the user scrolls up more data is loaded?

  • @zunnoorainrafi5985
    @zunnoorainrafi5985 Год назад

    Assalamu alaikum,
    Thanks brother for this valuable content.
    How Old are you ? and from where you learn the most ? and will you tell me your favourite teachers on the internet?

    • @CandDev
      @CandDev  Год назад

      Wa'alaikumussalam, brother. I am 27 years old. I learn from documentation and find awesome code on GitHub from people around the world. Oh, and my favorite teacher is Brad Traversy.😁

    • @zunnoorainrafi5985
      @zunnoorainrafi5985 Год назад

      @@CandDev thanks brother for your kind response