Gotta say...this is probably the best, most straightforward tutorial I've ever seen!
@Mike37373
4 жыл бұрын
why is openlibrary.org/search.json empty?
@jefffideler8046
4 жыл бұрын
@@Mike37373 perhaps it needs params i.e. axios({ method: 'GET', url: url, params: { q: query, page: pageNumber }, cancelToken: new axios.CancelToken(c => cancel = c) }).then
@serhendiefendi
3 жыл бұрын
i agree
@xanderav
3 жыл бұрын
Hey!, just a simple tip that i use, is when you want to know if an array have elements (means its length is greather than 0), you only have to put array.length instead of array.length > 0, because if array.length is 0, 0 means false, and if is not 0 so is true, sorry if my english is bad.
@irasanchez1265
3 жыл бұрын
No need to apologize for your English. it was understandable.
@nishantmogha7679
3 жыл бұрын
Or you can just use the array, [] is falsy.
@limitless9483
3 жыл бұрын
@@nishantmogha7679 array [] and {} are truthy brah
@limitless9483
3 жыл бұрын
Also to make sure the app won't crash when array is null use optional chaining like myArr?.length
@xxxyy7452
2 жыл бұрын
You can do that, but sometimes clearly code better than clever code
@toaninh2668
2 жыл бұрын
when i click this video, i only expect to know how to implement infinity scroll. But after 25 minutes i have learned way more than that, like custom hook. Thank you so much
@magicfibre
2 жыл бұрын
I think this deserves a clarification - it's not just useCallback that can be assigned to an element's ref. Any function can be passed there, you just need to be very careful if the function updates state, since it can cause infinite re-renders. Therefore, in this scenario, Kyle is right to use the useCallback hook, as the function he's using calls setPageNumber. Let's say he used a plain function: the function he's using sets the state at some point, which re-renders the component. When the component gets re-rendered, the function gets reinstantiated. Since it's passed to an element's ref, the element gets re-rendered, which calls the function again. The function changes the state, causing the component to re-render... and we have ourselves an infinite loop.
@CaratBoo1D
Жыл бұрын
Wonderful explanation!!
@JeanGray218
Жыл бұрын
this literally just happened in class a few minutes ago in this example our TA was showing us...thank you now I understand why
@manavdixit3355
Жыл бұрын
Why can't we just create an reference using useRef and pass it to the component. Then Handel the intersection observer without a function.
@kavyar8579
10 ай бұрын
Great explanation
@CesarZaitoun
18 күн бұрын
Thanks for explaining that, this is the only section in the video that I needed more explanation on
@johnbox5540
4 жыл бұрын
awesome video. infinite scrolling starts at 17:50
@sahaneakanayaka3394
Жыл бұрын
That useCallback() behavior with useRef() that confused me, now I got it. Thank you Kyle, this is the best explanation about infinite scrolling with react 😍😍
@rajapavithraselvaraj5937
Жыл бұрын
I really have to say.. this was the best, clear, very staright forward tutorial. AWESOME
@acedecastro83
4 жыл бұрын
Learned a lot from this. Thank you so much Kyle 🙏🏼
@WebDevSimplified
4 жыл бұрын
You're welcome!
@akarshsrivastava8890
3 жыл бұрын
Kyle, you are great. Never found a tutor explaining such complex topics so easily. 😊
@fluntimes
4 жыл бұрын
Great to see a video that includes some of the more advanced React features. I'll definitely need to watch this again, which is a feature of the best code run through videos.
@rizqyhbb
2 жыл бұрын
just from this video I have learned so many things, mainly the useRef and useCallback. thankyou
@uszeyboi
3 жыл бұрын
Thank you so much! I was struggling with window object so long and finally your video helped me!
@frontendHacks
2 жыл бұрын
kzitem.info/news/bejne/xGaksZ6Dp3aXemk&ab_channel=Front-EndHacks Watch Infinite Scroll Video here in Hindi
@Doom_C
4 жыл бұрын
Awesome tutorial man. Straight to the point and well explained. Got an infinite scroll up and working in my application no problem after watching this. Subscribed!
@aryavats5403
Жыл бұрын
Man I have watched literally thousands of paid courses, but no course matches the level of explanation that this guy provides. Simply Amazing. Hats off!
@user-rm6rb3tp5u
2 жыл бұрын
This react lecture is AMAZING... Thanks from Korea.
@Rodo1802
10 ай бұрын
This is a great tutorial, straight to the point and clear. Thank you, Kyle!
@LinkSake
4 жыл бұрын
Amazing! Thank you very much, I thought it would be harder to make something like this. Also THANKS because I finally got how to make a custom hook, I was having some struggles to get it.
@eternl_sunshine22
6 ай бұрын
thanks!! used your pagination api with this, tweaked it a little as i'm using sequelize and it works great.
@brunamarques580
Жыл бұрын
Thank you so much for this tutorial, it literally helped me pass in a interview test 👏
@MaxAigner
Жыл бұрын
I am really impressed by this tutorial, it helped me a lot in my current react project, thank you!
@sergiodfm
4 жыл бұрын
I. You are awesome. This video is amazing. You just went straight to the point and your language was very clear. Thanks for sharing this content.
@nalladileepreddy1436
3 жыл бұрын
Never saw any better explaination than this, thank you ..
@NikhilAdiga
3 жыл бұрын
Thank you so much! None of the other solutions worked for me except this!
@whereismyjuliet
3 жыл бұрын
Amazing tutorial, as special the approach to trigger the axios function via IntersectionObserver instead of div.scrollHeight.
@isaacpriestley
Жыл бұрын
Your tutorials are incredible! It's so much great information in such a concise presentation.
@mohammadaldibes6879
2 жыл бұрын
The best tutorial I've ever seen
@koladeleolaitan
Жыл бұрын
Just used this at work. Thank you Kyle!
@user-ci5cq5il1s
6 ай бұрын
Thank you for making such an understandable and useful lessons! You're really great🙏💛
@usamatahir6413
3 жыл бұрын
Thanks for the tutorial. This is probably the best, most straightforward tutorial
@RizaHariati
2 жыл бұрын
The intersectionObserver is awesome!! so much more practical!
@supreechajaijumpa4656
2 жыл бұрын
I'm tried to use infinite scrolling library but it not looking good. Your video had save my life it working great and smooth, Thanks
@ismoilshokirov
3 жыл бұрын
Really good approach, dude your video helped me a lot to finish my project at work, Thank you so much
@aronhegedus
2 жыл бұрын
Thank you for this tutorial! I got something similar workign, I just wanted the "isVisible" for one of my elements to show up. I think this video is a little too long, and getting the custom hook created is a little bit of a side job for getting infinite scrolling, and I would have preferred just getting the "isVisible" working, and then going from there. That being said, thanks for the info, your tutorials are always at a good pace, and I like that you've included the source code!
@parasarora5869
4 жыл бұрын
its totally amazing. i dont know about intersection observer so was a bit confused there but the video was mind blowing. Thanks for explaining the idea behind the infinite scroll
@WebDevSimplified
4 жыл бұрын
Intersection Observer is a bit complex, but it makes doing things like infinite scrolling so much easier.
@parasarora5869
4 жыл бұрын
@@WebDevSimplified yes.. absolutely correct
@jairocket
2 жыл бұрын
This tutorial is amazing! Thank you very much for making it simpler!
@romihasan380
3 жыл бұрын
you've a better solution than using scroll position broo, good job!!
@brindch8372
4 жыл бұрын
Just a side note, you can also use Debounce Component to have delay when the user stops typing. Anyway, Great job! thanks for this!
@WebDevSimplified
4 жыл бұрын
Very true. For this small use case it isn't really a big deal, but in a larger application this could save a lot of performance. Thanks for the tip.
@ManishKarki
4 жыл бұрын
@@WebDevSimplified can you point me to some resource for this"debounce"? Thanks
@brindch8372
4 жыл бұрын
@@ManishKarki you can search for react-debounce-input
@WebDevSimplified
4 жыл бұрын
@@ManishKarki Just do a Google search for React debounce. Essentially all it is, is delaying the axios request.
@anshshrivastava9107
3 жыл бұрын
Thanks for this man, exactly what I was looking for, now I can create what I wanted. THANKSSSSSSSSSSSSSS
@kingsleyakindele5389
3 жыл бұрын
A very great tutorial man.
@jrs_devs
2 жыл бұрын
Using the ref on the children will force them to re-render when they're not the last item in the array, so maybe is better to use a the ref on a footer or something to observe the IntersectionObserver. And use useEffect to have the same functionality.
@amitpareek8905
4 жыл бұрын
Amazing video. You have made a complex thing look so easy. Keep up the great work!! Thank you!
@frontendHacks
2 жыл бұрын
kzitem.info/news/bejne/xGaksZ6Dp3aXemk&ab_channel=Front-EndHacks Watch Infinite Scroll Video here in Hindi
@viratkohli-jr6md
3 жыл бұрын
Cool . Got my all doubt cleared. Nice work
@razzsawhoney2818
3 жыл бұрын
Thanks man. A much needed tutorial for me...
@DieterWiesflecker
3 жыл бұрын
Very very straightforward, keep the good work and thanks!
@faris.abuali
Жыл бұрын
Great explanation! Thanks Kyle!
@Nil-js4bf
2 жыл бұрын
Didn't realize so little code was required for this. I'm too used to using libraries and I'm not aware of what Web APIs there are. Going to put an effort to learning more of these things and getting comfortable with web APIs like Intersection observers and setting it all up with refs and callbacks
@invictuz4803
4 жыл бұрын
Awesome tutorial mate! I suggest including "Custom React Hooks" in your title. I was actually pleasantly surprised that this tutorial was going to include custom hooks. If I had saw that in the title, I would have clicked on it way earlier since React Hooks is the hot thing that everyone should be learning now. Furthermore, now that I've saved this to my React playlist, I still won't know that it includes custom hooks when I scan through all the video titles.
@ankitmehrotra8519
4 жыл бұрын
Thanks a lot Kyle. All of your videos are top notch..
@waynes9744
4 жыл бұрын
I learned a lot from this video. Thank you, Kyle.
@WebDevSimplified
4 жыл бұрын
You are very welcome
@mayurborse1745
4 жыл бұрын
Awesome. Just what I was looking for. I used it in photo grid and full screen view in my app. Thanks
@chexter-wang
3 жыл бұрын
This is so easy to use and does help a lot! Thank you for the video!
@sendashish
2 жыл бұрын
There is one serious situation custom hooks can land into is when the arguments change, the useEffect inside hook is not called synchoronously, in fact it is called asynchronously whenever React wants, therefore, the very first render after the change of the arguments, hook will still return the stale data (in this case the books because of useState). I land into this issue when I was creating my useLocalStorage which takes a key. And when I change the key it still returns data for the old key. This scenario is well taken care by useSWR hook, the moment the API URL changes the data returned is different. Can you make a video regarding these advanced patterns in REACT sometime?. That would be wonderful!
@irvanhardyanto7038
2 ай бұрын
Nice video, worked like a charm
@baileysli6235
2 жыл бұрын
5:24 - use https if you have problems
@itsatimemachine
2 жыл бұрын
your videos are awesome-- thank you! also, happy new year
@djmilen4o
4 жыл бұрын
Nice and clean tutorial! Very good explained!
@mellocamilo
3 жыл бұрын
Awesome tutorial!! thanks for this high quality work!
@Andy801_dawless_music
4 жыл бұрын
so much useful info in 25 mins 😄 thanks!
@marcusmaiialima
3 жыл бұрын
Thank man!! It was very simple to implement and add to the project.
@HostDotPromo
4 жыл бұрын
A react native tutorial on this would also be awesome. Currently building an app with native.
@WebDevSimplified
4 жыл бұрын
I don't like mobile development so there probably won't be much if any React Native on my channel.
@KarahannAe
3 жыл бұрын
Thank you for this amazing video! My project was a little different but I managed to make it work in a short amount of time.
@frontendHacks
2 жыл бұрын
kzitem.info/news/bejne/xGaksZ6Dp3aXemk&ab_channel=Front-EndHacks Watch Infinite Scroll Video here in Hindi
@chronotriggered204
4 жыл бұрын
Wow, infinite scrolling was simplified many thanks, your explanations help me grok
@jhmesseroux
2 жыл бұрын
incredible bro i appreciate this🙌 kind of content
@hamedbahram
3 жыл бұрын
Hey Kyle, thanks for the amazing tutorial, appreciate your work. I know this is an older video but had a quick question if you ever had the chance to read this, I can't figure out why the function inside the useCallback() where you defined the intersection observer get's called 4 times each time an intersection is observed. Best.
@limitless9483
3 жыл бұрын
Its being called twice, the first time you feed the target (node ) to the observer and the second when the target intersects with its intersection root (the scrollable div container)
@rva3674
4 жыл бұрын
The best tutorial in youtube!!!
@lexternal
Жыл бұрын
thanks, great tutorial. prob one of the best i ever watch
@soultouchingsongs
4 жыл бұрын
Thanks a lot for the video🙏. Finally understood infinite scrolling.👍
@TiberiusGracchi
2 жыл бұрын
Very good information, especially the part about using useCallback instead of ref. I was just wondering how to grab the last node.
@gautamv2046
3 жыл бұрын
Really appreciate your work, simplest of all
@frontendHacks
2 жыл бұрын
kzitem.info/news/bejne/xGaksZ6Dp3aXemk&ab_channel=Front-EndHacks Watch Infinite Scroll Video here in Hindi
@akshayjadhav2418
4 жыл бұрын
Really good content kyle, please make video on lazy loading and interceptor in react (:
@mcy93w
3 жыл бұрын
24k pure gold. Thank you so much!
@ashishkumawat6110
Жыл бұрын
Very clever implementation!
@reedstewart8413
4 жыл бұрын
Great video! I've been watching your React videos for some time now and was just wondering why you use es5 functions instead of es6 arrow functions? Again really good video!
@WebDevSimplified
4 жыл бұрын
It really depends on the use case. I find that if I am creating a named function such as function someName() {} then I use a normal function, but when I am nesting function calls in callbacks or making anonymous function calls like this someOtherFunction(() => {}) then I use an arrow function. It really depends, though, and for the most part I use arrow functions.
@mattmarkus4868
2 жыл бұрын
to be honest, I find the old school function() easier on the eyes. I only use => when doing anonymous functions and call backs like he said ^. But if it's just a function on the component, I like the look of the "es5" way.
@dijkstra5952
2 жыл бұрын
Nice tutorial. Although it's more correct semantically to use useEffect for attaching and disconnecting an observer on the last visible node rather than using useCallback like you did. Thanks for your videos!
@quoccuong1733
2 жыл бұрын
Is there a difference though. Ive doing it the useEffect way but wonder if 2 methods differ in any way
@yassinerassy6840
2 жыл бұрын
Can you provide more details why ?
@yorkwebsolution8986
3 жыл бұрын
Very simple explanation. thanks alot
@md.akib5124
4 жыл бұрын
wow you just taught us to make a node_module. Thank you so much
@niyongaboeric
4 жыл бұрын
Hi Kyle, thank you for sharing the video. 17: 05 to 17: 46 min saved me. I never used two userEffect before, one to clean the state another to fetch data until I watched your video. I am implementing Cursor relay pagination. I had an issue about clearing old data. Whenever react-route changes I could get old data and new data repeatedly. I 've fixed the issue after 2 days struggling with your help. God bless you brother.
@Mike37373
4 жыл бұрын
why is openlibrary.org/search.json empty?
@riankrishandi
3 жыл бұрын
nice tutorial , clear explanation , thanks bro
@navead30
4 жыл бұрын
Nice tutorial. This works smoothly for text based results. But it will struggle to render list of complex React components when list becomes huge. Can we also have a React window tutorial
@bobkazamakis5169
2 жыл бұрын
what do you mean by that?
@shivrajnag12
3 жыл бұрын
How to deal with the scenerio when each item has a delete button along side it and the user can delete item while scrolling, then data will change at the backend(The data will shift to previous page and I will not get the correct no of data for scrolled page ) I hope you understood what I mean to say
@AjithAbinashSS
Жыл бұрын
Great Tutorial... Helped a lot
@engineerscodes
Жыл бұрын
how to prevent multiple axios requests on infinite scroll ?
@said-magomeddzhabrailov7911
Жыл бұрын
Thanks for the great content!
@freddyperez1399
2 жыл бұрын
With typescript your example doesn't work
@kemcadams7210
4 жыл бұрын
This is a great example - thanks
@BhushanDhage
3 жыл бұрын
Awesome explanation 👌🤩
@priyasivakumar3607
2 жыл бұрын
Nailed it. Thanks for the Topic
@AbhishekBijalwanGaz
3 жыл бұрын
1000 likes from my side, Brother.
@xunianzu
3 жыл бұрын
This is very helpful. Thank you.
@superbin6021
Жыл бұрын
Thank you, handsome teacher
@kat802
2 жыл бұрын
thanks dude, u save my job. button like for u
@hakanaki
3 жыл бұрын
Love Your Videos bro 👏👏
@fab313
4 жыл бұрын
Great lesson. Thank you!
@SanjayYadav-ur4qj
2 ай бұрын
Great! I want to highlight that you keep adding new items to DOM, which will make DOM heavy. In this approach, We might have a large number of elements. How can we solve this issue? Is there any approach where we can maintain a specific set of items? No matter how long the list is.
@granporculio
3 жыл бұрын
Magnificent video 👏👏👏 When should this infinite scroll be used vs manual pagination?
@limitless9483
3 жыл бұрын
Litterally you have an example on KZitem check your notification bell
@syedumair3172
3 жыл бұрын
Learned a lot! Thanks
@Nexjsdeveloper
5 ай бұрын
Thank you so much, useful❤
@bipinnamburu9820
3 ай бұрын
Hey,why do we need to store previous books initially while just fetching all the books according to the string?
@roshanlalsahu7846
2 жыл бұрын
we can also use debounce as an alternative to cancelling API call
Пікірлер: 333