@@bhupeshbhatt4334 In alternate words, assume you have a GK book :) Now say you are asked a GK question to which you dont know the answer but you are free to look in the Book. Assume you found the answer. Now you are asked that question again. This time you will not look into the Book because you know the answer :p Now you will answer instantly. The ability to remember the question, answer in your mind is CACHING
@@sindhuMilkyway person used to understand the things when they started implementing the things. He doesn't know he had to study his cache first when he comes to understand he got to know .. so you can't tell anyone this who is eager to learn .. You guys know nothing and doing showoff..
I am starting to feel that some hooks are introduced as workarounds to problems that shouldn't have existed in the first place. It would be great if the React team can come up with solutions that fixes the internal code to avoid performance issues instead of using hooks to wrap around stuff.
That is not possible. right? Since each API's in react has its own purpose, developers have to use the additionally provided API's by the framework to work according to their needs.
i think your the best youtuber for developers, the way you explained and all with sweet voice with better understanding. Should you start react project playlist so we can do better understanding. lots of love from india
const incrementAge = useCallback(() => setAge((age) => age + 1), []); const incrementSalary = useCallback(() => setSalary(salary + 1000), [salary]); This also works based on the knowledge from your earlier tutorials.
So we have 4 différences way to optimize our code : -extends from Pure.Components in the case of using class Components -React.memo(class/function Compnent) -useCallback(arrow Function , [Denpendecies variables looks for]) -useMemo(arrow Function , [Denpendecies variables looks for])
Love the tutorials but I always wonder what other shortcut/snippets you use to make coding more efficient (already installed the ES7/React/Redux ... mentioned). For example, at 1:00, what extension or snippet do you use to make CounterOne, CounterTwo auto change to camelcase if needed? Thank you!
Nice tutorial for performance point of view . But if you explain this with console, then it will be much better to understand the rendering of component based on call through useMemo() and without useMemo(). btw, always thanks for your hard work.
I know React is wanted by many, but let's be fair that a good number of these hooks and techniques are created merely to somehow patch deficiencies in the React core design!
Nice explanation but i have a question you converted even function to "value" to be returned but what if "even" function logic depends on "some parameters being passed from child" and it has to remain as function && this function can be utilized by many childs and can return the value as per the passed paramamters from child. what do we use then useCallback or useMemo. i am bit confused please help me.
Well done bro. Very informative. I have one question. What about memorizing a component and passing an equality check function to use Memo as 2nd argument? If you could also put some light on this, that would be really great.
😍
useCallback: Caches the provided function instance
useMemo: Invokes the provided function & caches the result
what do cache mean?
@@bhupeshbhatt4334 it means store the object(function instance or the result) in memory, so you don't have to recreate it every time
@@bhupeshbhatt4334 In alternate words, assume you have a GK book :)
Now say you are asked a GK question to which you dont know the answer but you are free to look in the Book. Assume you found the answer.
Now you are asked that question again. This time you will not look into the Book because you know the answer :p Now you will answer instantly. The ability to remember the question, answer in your mind is CACHING
@@bhupeshbhatt4334 Pls learn web basics and then come to frameworks/library.
@@sindhuMilkyway person used to understand the things when they started implementing the things. He doesn't know he had to study his cache first when he comes to understand he got to know .. so you can't tell anyone this who is eager to learn .. You guys know nothing and doing showoff..
You are one of the best online teachers. Thanks a lot for your contributions
Finally, a simple explanation that goes beyond just reading and demonstrating what is already in the docs. Thanks!
Fascinating description especially the difference between useMemo and useCallback, thank you!
Amazing explanation!! I am finally starting to understand concepts that have been eluding me for some time. Your tutorials are AWESOME!!!
Great explanation to be honest .. if you have time to work on a project please build a project with a backend and hooks..
Yeah, this is probably the best explanation of useMemo on the internet. Bravissimo, sir!
The comment in the last 20 seconds of the video gets my sub! Amazing coverage of this topic!
easiest and shorted explanation on whole youtube, thanks
I am starting to feel that some hooks are introduced as workarounds to problems that shouldn't have existed in the first place. It would be great if the React team can come up with solutions that fixes the internal code to avoid performance issues instead of using hooks to wrap around stuff.
That is not possible. right? Since each API's in react has its own purpose, developers have to use the additionally provided API's by the framework to work according to their needs.
I totally agree with you.
You are right In other programming language we focus on how to update the ui,here we are focusing on how not to rerender
Man you have a very conceptual knowledge.
Your explanation of each vedio is self sufficient. It's help me a lot to understand clearly. Thanks for creating this.
Your every example is awesome, clear
Your Teaching style is awesome!
why don't more tutors explain like this???? you sir are a hero
I think finally I am clear with useMemo and useCallback, but definitely optimization is advance skills in react. I am glad to achieve it
absolutely nailing the tutorials, best on youtube
Simply the best explanation on hooks
Loved your video
Way to go brother...
Wow... This video is simply amazing and cleared lot of my doubts
i think your the best youtuber for developers, the way you explained and all with sweet voice with better understanding. Should you start react project playlist so we can do better understanding. lots of love from india
const incrementAge = useCallback(() => setAge((age) => age + 1), []);
const incrementSalary = useCallback(() => setSalary(salary + 1000), [salary]);
This also works based on the knowledge from your earlier tutorials.
So we have 4 différences way to optimize our code :
-extends from Pure.Components in the case of using class Components
-React.memo(class/function Compnent)
-useCallback(arrow Function , [Denpendecies variables looks for])
-useMemo(arrow Function , [Denpendecies variables looks for])
Jamil jiddan
Thank you brother, It is so great. You explain everything very slowly and amazingly. Awesome bro.
Keep it Please. 😁
thank you as always , simple and straight forward
Really... you explain very well...I love your all tutorials...
Thanks a lot Sir you explained it way better that I can understand easily...
Best and easy to capture explanation
Love the tutorials but I always wonder what other shortcut/snippets you use to make coding more efficient (already installed the ES7/React/Redux ... mentioned). For example, at 1:00, what extension or snippet do you use to make CounterOne, CounterTwo auto change to camelcase if needed? Thank you!
es 7 react/redux graph ql snippet
If you have installed es7 snippet extension then just simply type useStateSnippet . It will create the snippet
Excellent Explanation.
Nice tutorial for performance point of view .
But if you explain this with console, then it will be much better to understand the rendering of component based on call through useMemo() and without useMemo().
btw, always thanks for your hard work.
Amazing. You are the best!
Best tutorial 🔥
Thank you for your nice presentation. I understand this topic. :)
Thanks for those videos.
could we use the useeffect adding dependecies to achieve same like what usememo does?
Nope you can't collect the return value in useEffect hook as it does'nt return any value it just call the function when dependency changed
great explanation
Thank you soo much :) Nice explanation!
You are superb ❤❤
Thank you, Sir
Thank you so much sir ❤️
Great, thorough explanation
Good explanation
How to write that equal to 3:29
We could just use useEffect with counterOne dependency or not? It has same functionality. What's the difference?
Tnks, very good example
Best Explaination
Awesome man
Great Tutorial
nicely explained
tysm 💖
I know React is wanted by many, but let's be fair that a good number of these hooks and techniques are created merely to somehow patch deficiencies in the React core design!
Thank you😊👌
Wow awesome
In this particular case, can the delay be reduced without changing the 1st parameter (i.e. function) of useMemo?
will the useEffect with counterOne as dependency work to compute isEven state. Like an alternative to useMemo
Nice explanation but i have a question you converted even function to "value" to be returned but what if "even" function logic depends on "some parameters being passed from child" and it has to remain as function && this function can be utilized by many childs and can return the value as per the passed paramamters from child. what do we use then useCallback or useMemo. i am bit confused please help me.
How would you combine the same function with useCallback and useMemo
That’s my question too. Pls answer!
Isne useEffect the same? when added a dependant parameter it also loads depending on that right?
wdym?
Thanks 🤩🤩
thank you
Can't stop rerenderings if i pass the object as prop to child component. How can i do that?
where useMemo will cache the result. Is it browser local storage??
Muy buen vídeo
Sir will you please make a video on jwt authentication with react
so, we could also use useCallback hook, correct????
I dun know but counter counter counter
This is sometimes not clear at all
Example should be little bit complex
What is cached value ?
What if I use useCallback for this isEven func works same right??
Then why did we have two methods for optimisation
see useCallback is used to cache the function instance.useMemo is a way to cache the function result.Understand the difference.
Sir U didn't call the isEven in counter two
Wouldn't this problem be solved if u used useCallback too?
can you make a video on how to implement hoc using hooks
Custom hooks are replacement of HOC, I think
thanks
Awesome
Why would anyone dislike this video? O.o
what is the difference between useEffect and useMemo. Anyone please let me know.
great
how to type triple equal to and triple not equal to in vs code
what are these khaching values
saved in memory
what do cache mean?
save in memory
How to the same in class components??
Can someone please help me
👍👍👍
looking for this exact example.......
👌
Looking for Nodejs
why not simply use a call back onClick={()=>incrementTwo};
even paid courses dont teach this well..
Well done bro. Very informative. I have one question. What about memorizing a component and passing an equality check function to use Memo as 2nd argument?
If you could also put some light on this, that would be really great.
Awesome
great