Video TOC 0:00 - Introduction 00:23 - What is Application Performance? 01:46 - What are useCallback and useMemo? 07:45 - Usages of useCallback and useMemo 11:47 - useCallback and useMemo Examples 22:58 - When NOT to use useCallback and useMemo?
Nice one i should say best one Thanks for explaining in a easy and understandable way :) I get my answer why should we use useCallback() and useMemo() Thank you so much Really a good video I saw some videos they are also good but the question that comes in my head that yeah its use for performance but in which way and which performance i was unclear about that one now it's clear fully Again Thanks a lot :)
Sir, the value of 'this' is lexical(static) scoped or dynamic scoped? I have a confusion. I think it's dynamic scoped because it gets its value through execution context. But I have already learned, JavaScript only uses lexical scope.
The value of ‘this’ depends on where it is used and invoked. The context of usage. From that perspective, the value of this is dynamic based on the function, and object it is associated with. I wouldn't use the word dynamic scope or lexical scope with this. Scope is determined the visibility of a variable. It doesn't determine the value if ‘this’. The value of this is determined by the function invocation and usage of this with respect to it. This may be helpful: www.freecodecamp.org/news/javascript-this-keyword-binding-rules/
Hello Tapas, Thank you so much for the video. I understood the usage of the useCallback and memo. However I tried to modify the GreetingBox component by passing in name (const [name, setName] = useState("");) as the prop like instead of this . I tried displaying the Hello name in GreetingBox. My doubt is , IS there a difference when we send state (name) as a prop instead of a function(getGreeting) ? Because useEffect is not called when state is passed as prop whereas when we pass in as a function I can see Useeffect getting called whenever the button is clicked. like
i guess the thing is getGreeting function is being recreated on every render that's why when we are passing the getGreeting function as a prop without using callback to the GreetingBox component and using it as the useEffect dependency , getGreeting is being treated as a new function which is why the useEffect is running , on the other hand when we are sending a state variable as prop to the GreetingBox component it is not being recreated or lets say not being changed on every render that is why useEffect is not running because its dependency has a state variable as a prop which has not changed .
Video TOC
0:00 - Introduction
00:23 - What is Application Performance?
01:46 - What are useCallback and useMemo?
07:45 - Usages of useCallback and useMemo
11:47 - useCallback and useMemo Examples
22:58 - When NOT to use useCallback and useMemo?
It's actually too valuable for React Developer. You did a lot of effort to make this video as much as valuable for the learners, Hats off to you.
Thanks a lot for the encouraging words. It means a huge when someone appreciates the hard work behind the content creation.
@@tapasadhikary Its my pleasure
Good explanation. The warning you make is important, these hooks should only be used with just cause.
Yes true 👍
Great stuff! practical examples which we come across during app building and clear explanation. thank you for simplifying these concepts in React.
You are most welcome Abhinaya... Keep learning.👍
Nice explanation! Could u plz come up with some more examples or used cases for usememo and usecallback?
Yes I can
Hi Tapas, can you please make a another video briefing the differences between useMemo vs useEffect
Love it man 🎉❤
Thank you 💛
Nice one i should say best one
Thanks for explaining in a easy and understandable way :)
I get my answer why should we use useCallback() and useMemo()
Thank you so much
Really a good video
I saw some videos they are also good but the question that comes in my head that yeah its use for performance but in which way and which performance i was unclear about that one
now it's clear fully
Again
Thanks a lot :)
Very nice! Thank You.
Very nice
@@giriswamy6799 thank you
Sir, the value of 'this' is lexical(static) scoped or dynamic scoped? I have a confusion. I think it's dynamic scoped because it gets its value through execution context. But I have already learned, JavaScript only uses lexical scope.
The value of ‘this’ depends on where it is used and invoked. The context of usage. From that perspective, the value of this is dynamic based on the function, and object it is associated with.
I wouldn't use the word dynamic scope or lexical scope with this. Scope is determined the visibility of a variable. It doesn't determine the value if ‘this’. The value of this is determined by the function invocation and usage of this with respect to it.
This may be helpful: www.freecodecamp.org/news/javascript-this-keyword-binding-rules/
Hello Tapas, Thank you so much for the video. I understood the usage of the useCallback and memo. However I tried to modify the GreetingBox component by passing in name (const [name, setName] = useState("");) as the prop like instead of this .
I tried displaying the Hello name in GreetingBox. My doubt is , IS there a difference when we send state (name) as a prop instead of a function(getGreeting) ? Because useEffect is not called when state is passed as prop whereas when we pass in as a function I can see Useeffect getting called whenever the button is clicked.
like
i guess the thing is getGreeting function is being recreated on every render that's why when we are passing the getGreeting function as a prop without using callback to the GreetingBox component and using it as the useEffect dependency , getGreeting is being treated as a new function which is why the useEffect is running , on the other hand when we are sending a state variable as prop to the GreetingBox component it is not being recreated or lets say not being changed on every render that is why useEffect is not running because its dependency has a state variable as a prop which has not changed .
Please make a video on useContext and useLayoutEffect.
Next video coming a short one on props drilling and then useContext with example.
Sir can you give one practical example about Redux
I’m going in steps in the series. Next is context and after that I will start with redux. Thanks!
Thanks alot
Nikhil, I hope you watched the first video from the Redux series.
Yes i watched it was amazing video your explanation has erased my confusion on redux
Thank you so much
Why don't you show the example for useMemo
Let me know what example you look for.
@@tapasadhikary usememo example
@@lingarajhiroli965 Got it. Shall capture it any of the related video.
But u r example for callback also work using usememo also😅
Yep, it does.