Thanks Yes good catch, the reason being I wanted to explicitly emphasize that the function passed as props must return a promise. We can just directly return fetch from the function as well.
What if the list is so small that the last element does not go out of the page and in that case it will keep calling the API, since it will always be intersecting with the viewport.
Typically useCallback is helpful when passing callback props to highly optimised child components, if a child component that accepts a callback relies on a referential equality check (eg: React.memo() or shouldComponentUpdate) to prevent unnecessary re-renders when its props change, then it is important that any callback props do not change between renders. To do this, the parent component can wrap the callback prop in useCallback and be guaranteed that it is passing the same function object down into the optimised child component. But ----- You should avoid seeing useCallback as a blanket performance optimisation. In most cases, it’s simply better to accept that for functions declared inline with React components, each new re-render creates a new function object. This is typically absolutely fine and will not have a detrimental impact on performace
Ayush, I think you are right here. If child components are calculation-or-render heavy and using useMemo of sorts, then useCallback in parent makes sense, otherwise even if we send callback function, it doesn't really matter much as render function in child will still get executed, leadinng to no change in virtual DOM in comparison with existing DOM. useCallback shouldn't be used always, as mentioned in docs. Btw a nice video Vedant, helped in reflecting at all the JS and React concepts once more.
Hey man. Loved the video. Could you also include the solution source code in the description ? It makes browsing the code + learning much much faster. Thanks a ton
One Question : Was it a good way to implement function on App.js for InfiniteScroll. We can implement function use by infiniteScroll on it own file or can use separate file for these function like getDate into utiles and API files or can even implement customHook for infiniteScroll. I have read to keep the application login in separate file instead inside the component. What's your thoughts
Definitely we can try all possible optimisations. I wanted to keep this video simple and to the point. If you manage to achieve all optimisations in 40 mins it's well and good. But the prime focus should be to get the problem working on the client.
One request, can you make a video on understand large code base of react...like how they stucture their file or folders and some patters they use. I try to learn from large codebase to advance my react skill but sometime just got confused why they put some files here and there. But the way good videos 🤩🤩
Great question, the idea is to fetch results of the final search query only so we cancelled all the other requests. To do one step better you can add debounce on the api request along with abort.
@@js_cafe In most cases, looks like HTTP requests cannot be cancelled like that... the server is still going to process every request that was aborted, by aborting - the client just moves on. Its just much better to use debouncing instead - just don't make the calls. ruclips.net/video/HAadSWQpB3s/видео.html ruclips.net/video/WmPKzFYKijM/видео.html
If dependency changed then it will return a new function with updated arguments, here it's wrongly handled it's gonna give same result not matters how many times you calling it.
It can be very simple you did in very complicated ways
Wouldn't it be better if we used debouncing instead of abort controllers?
Bhai bahut radi explanations tha
This really helps a lot 🙂. Waiting for more content from this underrated guy .
why cant we use debouncing instead of abortcontroller, debounce can prevent from the call happening
Very informative. Quick question, Why exactly was the fetch api wrapped in a new Promise, when fetch itself returns a promise?
Thanks
Yes good catch, the reason being I wanted to explicitly emphasize that the function passed as props must return a promise. We can just directly return fetch from the function as well.
why pageNumber is a ref and not a state?
This is really good way of writing code, I learnt something new ...
Keep it up...👍
What if the list is so small that the last element does not go out of the page and in that case it will keep calling the API, since it will always be intersecting with the viewport.
Superbb
Thanks for this video
Thank You . Please upload more content related to this.
Will add more.
Please make video on UseCallback hook
Will make one!
Why you are using usecallback in every function it is generally not a nice practice
Hey, can you support your answer with a reason?
Typically useCallback is helpful when passing callback props to highly optimised child components,
if a child component that accepts a callback relies on a referential equality check (eg: React.memo() or shouldComponentUpdate) to prevent unnecessary re-renders when its props change, then it is important that any callback props do not change between renders.
To do this, the parent component can wrap the callback prop in useCallback and be guaranteed that it is passing the same function object down into the optimised child component.
But -----
You should avoid seeing useCallback as a blanket performance optimisation.
In most cases, it’s simply better to accept that for functions declared inline with React components, each new re-render creates a new function object. This is typically absolutely fine and will not have a detrimental impact on performace
As said every re-render creates a new function object. If we can avoid creating new functions in memory then there is no harm in using useCallback.
But if your dependancies array is empty then what is the use of using it unnecessarily
Ayush, I think you are right here. If child components are calculation-or-render heavy and using useMemo of sorts, then useCallback in parent makes sense, otherwise even if we send callback function, it doesn't really matter much as render function in child will still get executed, leadinng to no change in virtual DOM in comparison with existing DOM. useCallback shouldn't be used always, as mentioned in docs.
Btw a nice video Vedant, helped in reflecting at all the JS and React concepts once more.
Hey man. Loved the video. Could you also include the solution source code in the description ? It makes browsing the code + learning much much faster. Thanks a ton
nice, but totally copied from "Web Dev Simplified"
One Question : Was it a good way to implement function on App.js for InfiniteScroll. We can implement function use by infiniteScroll on it own file or can use separate file for these function like getDate into utiles and API files or can even implement customHook for infiniteScroll. I have read to keep the application login in separate file instead inside the component. What's your thoughts
Definitely we can try all possible optimisations. I wanted to keep this video simple and to the point. If you manage to achieve all optimisations in 40 mins it's well and good. But the prime focus should be to get the problem working on the client.
One request, can you make a video on understand large code base of react...like how they stucture their file or folders and some patters they use. I try to learn from large codebase to advance my react skill but sometime just got confused why they put some files here and there. But the way good videos 🤩🤩
Why not debounce instead of abortcontroller ?
Great question, the idea is to fetch results of the final search query only so we cancelled all the other requests. To do one step better you can add debounce on the api request along with abort.
@@js_cafe In most cases, looks like HTTP requests cannot be cancelled like that... the server is still going to process every request that was aborted, by aborting - the client just moves on.
Its just much better to use debouncing instead - just don't make the calls.
ruclips.net/video/HAadSWQpB3s/видео.html
ruclips.net/video/WmPKzFYKijM/видео.html
where can we find the solution of this questions?
of machine coding rounds ?
don't copy from web dev simplified
what is the use of using usecallback without passing any dependency , it is created after every render right, can anyone clarify it here
No no, i believe it will be only created once.
If dependency changed then it will return a new function with updated arguments, here it's wrongly handled it's gonna give same result not matters how many times you calling it.
@@ananthadm I think you are mistaking useMemo with useCallback.
@@js_cafe👍, were you cleared the interview bro?
api is not working , please help
Yeah looks like they are down, instead use this API dummyjson.com/docs/products
Bro i just want to know does swiggy ask DSA problems for frontend engg roles as i am very poor in DSA
yes
i feel you have over used usecallback, its not required for every function you define in the component