I've been starting learning react just this week and this video helps me understand one of the fundamentals of React in a clear and understandable way. Kudos to the author of this tutorial, keep up the good work!
Honestly, though there is nothing wrong with react docs because if you are learning react correctly, you should know what a dependency list is (from useEffect), and if you know javascript, then you should know what callbacks are. Only my opinion though, you do you.
All videos in this series are very well organized and presented. The explanation in *this* particular video is the clearest I've come across on using Memo & useCallback to prevent unnecessary re-renders. Thanks.
You can optimize it more by passing the updater function as the dependency const incrementAge = useCallback(() => { setAge(age=> age + 1) }, [setAge]) Result: Rendering Age PS: it also work without dependency
Even no need to pass "setAge" as a dependency, because it is not the argument of the inner callback function. const incrementAge = React.useCallback(() => { setAge((prevAge) => prevAge + 1); }, []);
Thank you for making this hook easy to understand!! I don't know what, but I was having trouble understanding this one, but your simple, clear example was just perfect! I looked at like 6 other videos, and yet this one clicked with me. You just got a new subscriber!
I really appreciate your logic and hard work. I got stuck in my project and needed to come and understand why it was designed like that. Then your explanation enlightens me with easy examples. You should earn millions of subscriptions.
@@harshalsingh2443 This is because, I've removed the dependency of useCallback i.e age and using function while updating the state of age, it will automatically give me previous state of age. Remember here handler function is not dependent on age.
Thanks for the video really explains the concepts well. I hope you are doing this way to convey the concepts. If you separate salary and age as a different component with its own state, there is no need of memo or callback. You should have mention these kind of tips at the end. Most of us watching the tutorials are beginners while explaining the concepts if you include best practices also would be really helpful. Thanks..!!
By the way, can we stop with the useless comments saying how good the series is? Sorry to sound mean, but when I'm trying to get help, these comments really aren't helping. They are good, but please just stop and think if your comment would really help other people.
I really have the same thought, but i'm answering myself that it is just some tax i will afford for a free content because he get benefits from such comments
Another place you might want to implement useCallback is to maintain referential equality to functions passed into the dependency array for useEffect, etc.
Passing 'age' and 'salary' to the dependencies array of useCallback is not required, there is no specific reason that should make do that, in fact, it increases the amount of unnecessary re-renders of the component..
The dependencies list, according to codesandbox is not needed. If for example, I make the dependency list an empty array ([]), then only the salary is rendering, and everything is fine. Using age or salary inside the dependency list is bad because the button will still be redefined every single time. Why is this?
Really nice explanation of useCallback hook. I knew about other hooks, but this was alien to me, but you explained it really well. Subscribing for the explanation.
Your videos are great. I would like you to pass function to setState and don't use any dependency in useCallback, so that only the age and salary component will be rerendered and the buttons will not be rerendered.
Learned an important lesson about performance. Thanks a lot. But I think its not exactly optimized even with the use of useCallback() because the button is also being re-rendered even though only callback function has changed. I understand that its passed as a prop and when props change, the component re-renders... but when you look at the UI, the button remains the same... it doesn't need to be re-rendered. Will look deeper into this. Thanks.
Really quality stuff. I just have 1 update request. at 10.35 you compare incrementAge and incrementSalary function saying they are not the same which I believe everyone knows already. What I think you missed is that JS (not react) creates different instance/reference of both incrementAge and incrementSalary function at every render. Meaning, the same function declaration has 2 different references in 2 different renders. And that's where useCallback comes into play. Feel free to correct me if I am wrong.
I am having one concern with this solution, why even my button component render? We can overcome with this issue by setState(state=> state+1) and no dependency So at the end only state will be updated value so value print component will render
the performance optimization: the problem: in App there are several components, when one componenr is re-rendered, others will be re-rendered as well -> nicht optimal useMemo - refenrence equality for a function - we should not always use the callback function
useCallback: - in short: whenever a component re-renders (which will occur if its state/prop changes or unmount/mount), the states/functions inside it will also be created newly (new instances). So if these states/functions (which got new instances - aka this is meaning changed) - are passed as a prop to any child components, inside this parent component, it will trigger the child component to be re-rendered as well. Thats why useCallback & React.memo are used. - Performance Optimization -> useCallback( arrowFunction, arrayOfDependentprop ) chatgpt: Why using a useCallback all the time is not a good idea?
The way you break down complex concepts into clear and concise explanations that are very easy to understand is just amazing. Keep up the good work
“The question you might have is …” satisfies me every time. Very thoughtful videos.
I've been starting learning react just this week and this video helps me understand one of the fundamentals of React in a clear and understandable way. Kudos to the author of this tutorial, keep up the good work!
Dude, this one is super cool. The way you explain the stuff is far better. I wish you could have written the React docs.
Honestly, though there is nothing wrong with react docs because if you are learning react correctly, you should know what a dependency list is (from useEffect), and if you know javascript, then you should know what callbacks are. Only my opinion though, you do you.
I was seeking an extensive explanation for useCallBack hook. I found it today! You are amazing bro 💙
All videos in this series are very well organized and presented. The explanation in *this* particular video is the clearest I've come across on using Memo & useCallback to prevent unnecessary re-renders. Thanks.
the best version of explaining useMemo & useCallback Hook!
Concise and actionable. This here is an textbook example for how tech tutorials should be.
The way you explain the use cases and why and in which condition we must use certain things is just amazing. It's easy to learn concepts from you.
Learned React easily with your concepts; you saved lot of hours to invest learning topics.
Breaking down that sentence was incredibly helpful. Thank you.
Have been having problem for a long time understanding the concept before this very video.
The simplest explanation. thanks for the great video
The best explanation I've seen so far. Thank you
its worth it to watch your videos after 3 yrs of uploaded concept are clear
I recommend reading the article he put in the description.
the best simplified content you can see for useCallback hook ! 👋
You can optimize it more by passing the updater function as the dependency
const incrementAge = useCallback(() => {
setAge(age=> age + 1)
}, [setAge])
Result: Rendering Age
PS: it also work without dependency
Can you point out to the source from where you read about it.
@@abhijeetmaurya7355 react official docs usecallback.
Even no need to pass "setAge" as a dependency, because it is not the argument of the inner callback function.
const incrementAge = React.useCallback(() => {
setAge((prevAge) => prevAge + 1);
}, []);
@@asananddevsingh i already said that
@@drewstifler1440 Yeah, You are Right.
The best explaination on useCallback so far
definitely the best lecture I've ever watched! Thx!
Take a complex and scary subject and make it really simple
You deserve to be appreciated
Thanks! I really appreciate your work!
Great videos. Please do a component test series after hooks!
Great explanation of Memo and useCallback! Very thorough and clear.
Thank you for making this hook easy to understand!! I don't know what, but I was having trouble understanding this one, but your simple, clear example was just perfect! I looked at like 6 other videos, and yet this one clicked with me. You just got a new subscriber!
I really appreciate your logic and hard work. I got stuck in my project and needed to come and understand why it was designed like that. Then your explanation enlightens me with easy examples. You should earn millions of subscriptions.
I have seen other videos that cover this topic, but it is in this one that I really understood how it works. Thank you!!
You are an amazing tutor. The way you explain the concepts are just amazing. Really helpful.
Not going to lie, this one may took me a few times to rewatch to get my head wrapped around.
No words to describe how easily you explain this concept 👏👏👏
Great stuff! Its near impossible to find people who can explain complex topics with such clarity
Great. I became clear in this topic after viewing this video
This is the best video I have seen on useCallback. Thank you so much!!
Very informative & well explained in detail, Your way of teaching is amazing, thank you.
One of best explanation skills I have come across
Crystal Clear explanation ❤
excellent explanation, new function is created each rerender, and to solve that function should be memorized using a callback hook👏
What an Explanation brother! Keep it up. You have amazing talent. Appreciate it.
This is the best explanation..I never comment on any youtube video but This video was really awesome.
This is how to explain useCallback. Just Perfect.
This way will prevent the re-rendering of buttons too.
const incrementAge = useCallback(() => {
setAge((prevAge) => prevAge + 1);
}, []);
How is this happening
@@harshalsingh2443 This is because, I've removed the dependency of useCallback i.e age and using function while updating the state of age, it will automatically give me previous state of age. Remember here handler function is not dependent on age.
Thanks for the video really explains the concepts well. I hope you are doing this way to convey the concepts. If you separate salary and age as a different component with its own state, there is no need of memo or callback. You should have mention these kind of tips at the end. Most of us watching the tutorials are beginners while explaining the concepts if you include best practices also would be really helpful. Thanks..!!
This was just an example! Think of a complex application with multiple child components.
The way you are explaining is awesome thank you so much for sharing this video and your knowledge.
this is the best explanation of this hooks , now i know how its working
Thank you! This was very informative and well explained.
First time I understand useCallback thanks brother
you are a real teacher, thank you for this tutorials
By the way, can we stop with the useless comments saying how good the series is? Sorry to sound mean, but when I'm trying to get help, these comments really aren't helping. They are good, but please just stop and think if your comment would really help other people.
I really have the same thought, but i'm answering myself that it is just some tax i will afford for a free content because he get benefits from such comments
Another place you might want to implement useCallback is to maintain referential equality to functions passed into the dependency array for useEffect, etc.
Very good example. I love see logs to check performance issues!!!
Easy to understand because of the good explanation! Thank you
Passing 'age' and 'salary' to the dependencies array of useCallback is not required, there is no specific reason that should make do that, in fact, it increases the amount of unnecessary re-renders of the component..
Like I mention in the video, it is to explain the concept..
It is required due to closure. Unless you use an updater function.
we can avoid button re-renders too! remove age as dependency!
The best content ever
Thank you, Vishwas. Really great explanation.👌👌👌👌👌
I love your content..You explain concepts in such an easy manner!
Happy to have found your channel! :)
great explanation
omg, you explain like god. Really easy to understand you man. thanks so much :)
Amazing explanation!
Greatly explained
Amazing explanation.
Codevolution Your just the best
The dependencies list, according to codesandbox is not needed. If for example, I make the dependency list an empty array ([]), then only the salary is rendering, and everything is fine. Using age or salary inside the dependency list is bad because the button will still be redefined every single time. Why is this?
Really nice explanation of useCallback hook. I knew about other hooks, but this was alien to me, but you explained it really well. Subscribing for the explanation.
Totally got with the callback concept thank you
Great Man thanks 👍 really today I understand the way to use these 😁
To make just one rerender and not two : const increnementAge = useCallback(()=>setCount( c=> c+1), [setCount])
I think empty arraay [ ] is also good enough.
Very good understanding.
Best explanation I’ve seen, thanks!
Thank you very much explaining the concept in a easy way :)
awesome as always
Really great video!!! I learned a lot in these 15 Minutes!
Awesome explanation!! Thank you very much :)
Awesome explaination
Such a good way of teaching!
Great Explanation
Excellent. Only this video makes everything clear for me. Thanks
Awesome, explanation
awesome Explanation and thanks for the blog 🔥
Bhaiya mauj aagyi maa kasam
Your videos are great. I would like you to pass function to setState and don't use any dependency in useCallback, so that only the age and salary component will be rerendered and the buttons will not be rerendered.
11:25 I need this timestamp because I watch this video multiple times
Very well explained , thank you.
Great one🤩
I love your videos!
thanks for those videos.
thank u for a great and well-explained video!
What amazing video! This is great man!
Learned an important lesson about performance. Thanks a lot. But I think its not exactly optimized even with the use of useCallback() because the button is also being re-rendered even though only callback function has changed.
I understand that its passed as a prop and when props change, the component re-renders... but when you look at the UI, the button remains the same... it doesn't need to be re-rendered.
Will look deeper into this. Thanks.
explained clearly new subscriber here thank you very much
I learned so much, thanks !
excellent explanations. thank you so much for your effort
EXCELLENT EXPLANATION!!
Really helpful
Really quality stuff. I just have 1 update request. at 10.35 you compare incrementAge and incrementSalary function saying they are not the same which I believe everyone knows already. What I think you missed is that JS (not react) creates different instance/reference of both incrementAge and incrementSalary function at every render. Meaning, the same function declaration has 2 different references in 2 different renders. And that's where useCallback comes into play.
Feel free to correct me if I am wrong.
I am having one concern with this solution, why even my button component render?
We can overcome with this issue by setState(state=> state+1) and no dependency
So at the end only state will be updated value so value print component will render
you already get the answer sir?
Holy shieeet, I thought memo was the same as useMemo
Thankyou
Thank you
the performance optimization:
the problem: in App there are several components, when one componenr is re-rendered, others will be re-rendered as well -> nicht optimal
useMemo
- refenrence equality for a function
- we should not always use the callback function
useCallback:
- in short: whenever a component re-renders (which will occur if its state/prop changes or unmount/mount), the states/functions inside it will also be created newly (new instances). So if these states/functions (which got new instances - aka this is meaning changed) - are passed as a prop to any child components, inside this parent component, it will trigger the child component to be re-rendered as well. Thats why useCallback & React.memo are used.
- Performance Optimization
-> useCallback( arrowFunction, arrayOfDependentprop )
chatgpt: Why using a useCallback all the time is not a good idea?