React Hooks Tutorial - 27 - useMemo Hook
HTML-код
- Опубликовано: 10 сен 2024
- 📘 Courses - learn.codevolu...
💖 Support UPI - support.codevo...
💖 Support PayPal - www.paypal.me/...
💾 Github - github.com/gop...
📱 Follow Codevolution
+ Twitter - / codevolutionweb
+ Facebook - / codevolutionweb
📫 Business - codevolution.business@gmail.com
useMemo Hook in React
😍
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!
Great explanation to be honest .. if you have time to work on a project please build a project with a backend and hooks..
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
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!!!
Yeah, this is probably the best explanation of useMemo on the internet. Bravissimo, sir!
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
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 think finally I am clear with useMemo and useCallback, but definitely optimization is advance skills in react. I am glad to achieve it
Man you have a very conceptual knowledge.
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
Your every example is awesome, clear
why don't more tutors explain like this???? you sir are a hero
Your explanation of each vedio is self sufficient. It's help me a lot to understand clearly. Thanks for creating this.
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.
Thank you brother, It is so great. You explain everything very slowly and amazingly. Awesome bro.
Keep it Please. 😁
Wow... This video is simply amazing and cleared lot of my doubts
Simply the best explanation on hooks
Loved your video
Way to go brother...
Your Teaching style is awesome!
Thanks a lot Sir you explained it way better that I can understand easily...
absolutely nailing the tutorials, best on youtube
thank you as always , simple and straight forward
Best and easy to capture explanation
Really... you explain very well...I love your all tutorials...
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.
great explanation
Best tutorial 🔥
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
Thank you for your nice presentation. I understand this topic. :)
tysm 💖
Amazing. You are the best!
We could just use useEffect with counterOne dependency or not? It has same functionality. What's the difference?
Thanks for those videos.
thank you
Best Explaination
Thank you soo much :) Nice explanation!
Thank you, Sir
You are superb ❤❤
Thank you so much sir ❤️
where useMemo will cache the result. Is it browser local storage??
Wow awesome
In this particular case, can the delay be reduced without changing the 1st parameter (i.e. function) of useMemo?
Good explanation
Can't stop rerenderings if i pass the object as prop to child component. How can i do that?
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.
Awesome
Tnks, very good example
nicely explained
Awesome man
I dun know but counter counter counter
This is sometimes not clear at all
Example should be little bit complex
great
Great Tutorial
will the useEffect with counterOne as dependency work to compute isEven state. Like an alternative to useMemo
Thank you😊👌
Thanks 🤩🤩
Great, thorough explanation
How to write that equal to 3:29
How would you combine the same function with useCallback and useMemo
That’s my question too. Pls answer!
Wouldn't this problem be solved if u used useCallback too?
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
Muy buen vídeo
what is the difference between useEffect and useMemo. Anyone please let me know.
thanks
Isne useEffect the same? when added a dependant parameter it also loads depending on that right?
wdym?
so, we could also use useCallback hook, correct????
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!
how to type triple equal to and triple not equal to in vs code
What is cached value ?
Sir U didn't call the isEven in counter two
How to the same in class components??
Can someone please help me
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 will you please make a video on jwt authentication with react
Why would anyone dislike this video? O.o
why not simply use a call back onClick={()=>incrementTwo};
👍👍👍
looking for this exact example.......
👌
what are these khaching values
saved in memory
what do cache mean?
save in memory
can you make a video on how to implement hoc using hooks
Custom hooks are replacement of HOC, I think
Looking for Nodejs
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.
great
Awesome