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'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!
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.
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..!!
Another place you might want to implement useCallback is to maintain referential equality to functions passed into the dependency array for useEffect, etc.
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 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.
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.
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..
I have a question as you mention in the last that why we should not always use useCallback so there is is mentioned that it have to work twice like in this example: const dispense = candy => { setCandies(allCandies => allCandies.filter(c => c !== candy)) } + const dispenseCallback = React.useCallback(dispense, []) So why we do something like this yeah it looks clean but we can also do something like this const dispenseCallback = React.useCallback(candy => { setCandies(allCandies => allCandies.filter(c => c !== candy)) }, [candy]); so is this the same as above?? for cost expense or not
Bro you explained so great, It is amazing. Thank you. But I have one question. It seems me like, useMemo and useCallback hooks are kind a similar to each other. Can You explain difference please. Thank you bro
@@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.
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?
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
Good day sir @Codevolution, the Kentcdodds Blog post link in the description is not working. I'll go and search for it on google for now. Thanks anyways your videos give me great confidence.
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
If we do (prevAge => prevAge + 1) then we can pass empty array as dependency array. This will render only the count component, not the button. Isn't it the most optimized solution? Please explain me if I'm wrong..
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?
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.
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.
Breaking down that sentence was incredibly helpful. Thank you.
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!
I was seeking an extensive explanation for useCallBack hook. I found it today! You are amazing bro 💙
the best version of explaining useMemo & useCallback Hook!
Concise and actionable. This here is an textbook example for how tech tutorials should be.
The best explanation I've seen so far. 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
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.
Learned React easily with your concepts; you saved lot of hours to invest learning topics.
The best explaination on useCallback so far
Great videos. Please do a component test series after hooks!
Great explanation of Memo and useCallback! Very thorough and clear.
Very informative & well explained in detail, Your way of teaching is amazing, thank you.
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.
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 simplified content you can see for useCallback hook ! 👋
its worth it to watch your videos after 3 yrs of uploaded concept are clear
You are an amazing tutor. The way you explain the concepts are just amazing. Really helpful.
excellent explanation, new function is created each rerender, and to solve that function should be memorized using a callback hook👏
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!
definitely the best lecture I've ever watched! Thx!
I have seen other videos that cover this topic, but it is in this one that I really understood how it works. Thank you!!
One of best explanation skills I have come across
No words to describe how easily you explain this concept 👏👏👏
What an Explanation brother! Keep it up. You have amazing talent. Appreciate it.
This is the best video I have seen on useCallback. Thank you so much!!
First time I understand useCallback thanks brother
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.
The way you are explaining is awesome thank you so much for sharing this video and your knowledge.
This is how to explain useCallback. Just Perfect.
this is the best explanation of this hooks , now i know how its working
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.
Great stuff! Its near impossible to find people who can explain complex topics with such clarity
Take a complex and scary subject and make it really simple
You deserve to be appreciated
This is the best explanation..I never comment on any youtube video but This video was really awesome.
Great. I became clear in this topic after viewing this video
I recommend reading the article he put in the description.
Easy to understand because of the good explanation! Thank you
Thank you! This was very informative and well explained.
Very good example. I love see logs to check performance issues!!!
Thank you, Vishwas. Really great explanation.👌👌👌👌👌
Another place you might want to implement useCallback is to maintain referential equality to functions passed into the dependency array for useEffect, etc.
Thanks! I really appreciate your work!
you are a real teacher, thank you for this tutorials
I love your content..You explain concepts in such an easy manner!
Happy to have found your channel! :)
Not going to lie, this one may took me a few times to rewatch to get my head wrapped around.
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.
Crystal Clear explanation ❤
omg, you explain like god. Really easy to understand you man. thanks so much :)
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.
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.
Thank you very much explaining the concept in a easy way :)
awesome Explanation and thanks for the blog 🔥
Totally got with the callback concept 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.
Excellent. Only this video makes everything clear for me. Thanks
Best explanation I’ve seen, thanks!
Really great video!!! I learned a lot in these 15 Minutes!
Such a good way of teaching!
Awesome explanation!! Thank you very much :)
The best explanation 💯💯
I have a question as you mention in the last that why we should not always use useCallback so there is is mentioned that it have to work twice like in this example:
const dispense = candy => {
setCandies(allCandies => allCandies.filter(c => c !== candy))
}
+ const dispenseCallback = React.useCallback(dispense, [])
So why we do something like this yeah it looks clean but we can also do something like this
const dispenseCallback = React.useCallback(candy => {
setCandies(allCandies => allCandies.filter(c => c !== candy))
}, [candy]);
so is this the same as above?? for cost expense or not
Bro you explained so great, It is amazing. Thank you.
But I have one question. It seems me like, useMemo and useCallback hooks are kind a similar to each other. Can You explain difference please. Thank you bro
To make just one rerender and not two : const increnementAge = useCallback(()=>setCount( c=> c+1), [setCount])
I think empty arraay [ ] is also good enough.
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.
Great Man thanks 👍 really today I understand the way to use these 😁
thank u for a great and well-explained video!
we can avoid button re-renders too! remove age as dependency!
Codevolution Your just the best
Amazing explanation!
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?
Very well explained , thank you.
excellent explanations. thank you so much for your effort
Amazing explanation.
Greatly explained
Thank you so much, I really really appreciate it :)
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
The best content ever
Good day sir @Codevolution, the Kentcdodds Blog post link in the description is not working. I'll go and search for it on google for now. Thanks anyways your videos give me great confidence.
Very good understanding.
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
explained clearly new subscriber here thank you very much
What amazing video! This is great man!
Should we always use memo and callbackHook in case of state uplifting ?
I learned so much, thanks !
Is it always suggested to use "export default React.memo(Component)" instead of "export default Component"?
awesome as always
Awesome explaination
Great Explanation
great explanation
Wow This is Awesome!! great explaination...
@Codevolution, could you please tell me what color theme are you using for VS Code?
If we do (prevAge => prevAge + 1) then we can pass empty array as dependency array. This will render only the count component, not the button. Isn't it the most optimized solution? Please explain me if I'm wrong..
correct
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?
crystal clear explanation, thank you, muito bom
at 7:00 : When we're only updating the age, then why the "Increment Age Button" needs to re - render ?? Great videos btw.
isnt cause both age and button got updated so they re-render ? click event is update