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.
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.
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..!!
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); }, []);
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.
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..
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
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.
@@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.
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.
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
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.
at 10:54 React.memo sees that props has changes (because of its refrence) and will not prevent re-rendring. This is very important to understand. (its confused me, so i thought to explane for people like me)
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?
Hi, thanks for your awesome explanation. For React.memo, I still didn't get why when I click the age button, then the increment salary button renders, anyone can help?
Every time the ParentComponent re-renders, the incrementSalary function creates a new copy of the function that is different from the previous render. The same will happen if you increment the salary. The ParentComponent will create a new copy of incrementAge function and increment age button renders again.
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.
Thanks! I really appreciate your work!
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.
the best version of explaining useMemo & useCallback Hook!
I was seeking an extensive explanation for useCallBack hook. I found it today! You are amazing bro 💙
Concise and actionable. This here is an textbook example for how tech tutorials should be.
Breaking down that sentence was incredibly helpful. Thank you.
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.
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.
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
Learned React easily with your concepts; you saved lot of hours to invest learning topics.
The best explaination on useCallback so far
its worth it to watch your videos after 3 yrs of uploaded concept are clear
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!
You are an amazing tutor. The way you explain the concepts are just amazing. Really helpful.
I have seen other videos that cover this topic, but it is in this one that I really understood how it works. Thank you!!
the best simplified content you can see for useCallback hook ! 👋
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.
Very informative & well explained in detail, Your way of teaching is amazing, thank you.
Great stuff! Its near impossible to find people who can explain complex topics with such clarity
Great videos. Please do a component test series after hooks!
This is the best video I have seen on useCallback. Thank you so much!!
Take a complex and scary subject and make it really simple
You deserve to be appreciated
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 explanation..I never comment on any youtube video but This video was really awesome.
excellent explanation, new function is created each rerender, and to solve that function should be memorized using a callback hook👏
Very good example. I love see logs to check performance issues!!!
Thank you! This was very informative and well explained.
This is how to explain useCallback. Just Perfect.
you are a real teacher, thank you for this tutorials
First time I understand useCallback thanks brother
this is the best explanation of this hooks , now i know how its working
definitely the best lecture I've ever watched! Thx!
The way you are explaining is awesome thank you so much for sharing this video and your knowledge.
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.
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.
I love your content..You explain concepts in such an easy manner!
Happy to have found your channel! :)
Great. I became clear in this topic after viewing this video
Easy to understand because of the good explanation! Thank you
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.
Thank you, Vishwas. Really great explanation.👌👌👌👌👌
I recommend reading the article he put in the description.
Crystal Clear explanation ❤
Not going to lie, this one may took me a few times to rewatch to get my head wrapped around.
Best explanation I’ve seen, thanks!
Excellent. Only this video makes everything clear for me. Thanks
Really great video!!! I learned a lot in these 15 Minutes!
Another place you might want to implement useCallback is to maintain referential equality to functions passed into the dependency array for useEffect, etc.
Such a good way of teaching!
Totally got with the callback concept thank you
Thank you very much explaining the concept in a easy way :)
awesome Explanation and thanks for the blog 🔥
The best explanation 💯💯
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.
Very well explained , thank you.
Awesome explanation!! Thank you very much :)
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
Amazing explanation!
What amazing video! This is great man!
Codevolution Your just the best
Amazing explanation.
thank u for a great and well-explained video!
Great Man thanks 👍 really today I understand the way to use these 😁
explained clearly new subscriber here thank you very much
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.
excellent explanations. thank you so much for your effort
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.
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.
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.
Hello! I have not understood - why we re-rendering the ? It is not changing when our script working.
Can you be more specific :)
or your strict mode is enabled in index.js
Wow This is Awesome!! great explaination...
Thank you so much, I really really appreciate it :)
The best content ever
Greatly explained
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
I learned so much, thanks !
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.
I love your videos!
Bhaiya mauj aagyi maa kasam
Awesome explaination
we can avoid button re-renders too! remove age as dependency!
crystal clear explanation, thank you, muito bom
awesome as always
Great Explanation
at 10:54 React.memo sees that props has changes (because of its refrence) and will not prevent re-rendring. This is very important to understand. (its confused me, so i thought to explane for people like me)
Yes Correct !
Main nature of React.memo is only allow us to render when there is a change in state or props.
thanks for those videos.
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
Great one🤩
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?
EXCELLENT EXPLANATION!!
Hi, thanks for your awesome explanation. For React.memo, I still didn't get why when I click the age button, then the increment salary button renders, anyone can help?
Every time the ParentComponent re-renders, the incrementSalary function creates a new copy of the function that is different from the previous render. The same will happen if you increment the salary. The ParentComponent will create a new copy of incrementAge function and increment age button renders again.
great explanation