Dude these hook tutorials are brilliant, and genuinely the best I have come across in my the time I have used React - and I have explored a fair amount online
这是关于”wrap the 'fetchBusinesses' definition into its own useCallback() Hook“很好的解决方法和教程，感谢！ This is a good tutorial about "wrap the 'fetchBusinesses' definition into its own useCallback() Hook" question. thanks！
Yo @Ben Awad , you're such a blessing. here in 2020 looking for ways to optimize my code and couldn't find any better explanation than this. Thanks so much for your content. Always grateful , God bless you . Mad love from Uganda [ East Africa ]. 🚀🎉🎉
It would be nice to have a series of Hooks videos that build up a small application that utilizes useMemo, useCallback and creating custom hooks from a fundamental first perspective, why these methods will help you create more performant apps and components and a little bit slower of a pace. I understood this video, but I had to watch it a few times and I'm still trying to think of good practical examples where this info can help me out. Just an idea! This video really helped me though...
Thanks a lot, Ben. This series is really helping me to better understand the hooks and I`m watching each video carefully. In case of this "useCallback" hook, even with you explanation, I can`t figure out when I have to memoize, how to properly do it and how to manage rerenders. I didn't even understand how can your component doesn't rerender and yet shows the incremented number on the screen. So, can you go back, maybe one extra video outside this series, and, from the begining, explain this "memo" and "useCallback" concepts? Anyway I'm already greatefull for the job you are doing here. It's really helpfull.
I think you missed the fact that the component showing incremented value is the parent of the buttons - so the buttons stay the same and they only render once. However, without memo the buttons would re-render every time the incremented value changed because the component displaying that value re-renders.
Very useful thanks. Very hard to not get confused between all different hooks . In my app, I m using use effect most of the time, something isn’t probably right.
Why we need to add 'setCount' as a dependency of "useCallback", putting the dependency array blank should work fine. Is there any case where the "setCount" function can be changed?
Wait, we can just pass reference to increment function and shallow equal will return true. const increment =>(){......} and then pass via props increment={increment}. Ben?We can avoid using useCallback?
For useCallback you first use [count, setCount] as its dependencies. Later, at around 5:20, you remove "count" as a dependency for useCallback, leaving only [setCount]. You then changed the setCount to the updater style: setCount(c => c + 1). Why was this necessary? Why not just remove "count" as a dependency and keep setCount(count + 1)?
If you use setCount(count + 1) inside useCallback and remove count from dependencies array, the value of the count will always be its initial value (ie 0)
What about data fetching? Lets say i am fetching data in use effect how can i optimize that? So that if fetched data is same, it doesnt rerender that component
useCallback doesn't have any special knowledge of what setCount is. We know that it's a setter from useState, but the code inside useCallback only knows that it is a function. Since functions can be recreated (for example if it was a function that had been defined by another useCallback), we need to know to execute this useCallback again if "setCount" changed definition.
On both of the examples, are you not able to just pass setState to the child component as it is guaranteed to never change? I have a hard time seeing any use cases for useCallback unless the function itself did something computationally expensive. Still a great explanation regardless.
Guys I have one question if someone can help me please , so if component is number or string or array or object, Ract.memo is working - that means component will not render if those (data types ) props are same as before. but why does component renders if one of the property is function : just like in this video , if we write even so icrement function is not changing Hello component steel renders every time and we need to use useCallback hook in that case . So my final question is why does react.memo not working with function properties even so this functions stay same , or do they change in every render ? If function change every time why does people say that " increment={ increment } " is better practise then " increment={ () => setCounter(...) } " - this inline anonymous functions because anonymous functions are created every time when component renders ... I am little confused :D :D
The overhead of recreating the function wasn't what he was trying to avoid as much as re-rendering a potentially large child component to which that function is passed as a prop. That's what he was showing how to avoid
The best React videos on UA-cam to be honest, I've learned so much from these vids, and I can see that my code is getting only better
I just like how the numbers you chose align perfectly with the timestamp 7:21
watch useCallback Hook in Hindi in easy way explained
ua-cam.com/video/Gj68rN0vLSc/v-deo.html&ab_channel=Front-EndHacks
Dude these hook tutorials are brilliant, and genuinely the best I have come across in my the time I have used React - and I have explored a fair amount online
这是关于”wrap the 'fetchBusinesses' definition into its own useCallback() Hook“很好的解决方法和教程，感谢！
This is a good tutorial about "wrap the 'fetchBusinesses' definition into its own useCallback() Hook" question. thanks！
Yo @Ben Awad , you're such a blessing. here in 2020 looking for ways to optimize my code and couldn't find any better explanation than this. Thanks so much for your content. Always grateful , God bless you . Mad love from Uganda [ East Africa ]. 🚀🎉🎉
Thank you so much!
I used this for interaction with Canvas, because it was updating even if it didn't depend on any state variable.
this is as good as it gets with youtube tutorials, cheers
It would be nice to have a series of Hooks videos that build up a small application that utilizes useMemo, useCallback and creating custom hooks from a fundamental first perspective, why these methods will help you create more performant apps and components and a little bit slower of a pace.
I understood this video, but I had to watch it a few times and I'm still trying to think of good practical examples where this info can help me out. Just an idea! This video really helped me though...
that's a good idea
That swallow at the beginning tho 😂
Thanks a lot, Ben. This series is really helping me to better understand the hooks and I`m watching each video carefully.
In case of this "useCallback" hook, even with you explanation, I can`t figure out when I have to memoize, how to properly do it and how to manage rerenders. I didn't even understand how can your component doesn't rerender and yet shows the incremented number on the screen. So, can you go back, maybe one extra video outside this series, and, from the begining, explain this "memo" and "useCallback" concepts?
Anyway I'm already greatefull for the job you are doing here. It's really helpfull.
This video should help explain: ua-cam.com/video/o-alRbk_zP0/v-deo.html
I think you missed the fact that the component showing incremented value is the parent of the buttons - so the buttons stay the same and they only render once. However, without memo the buttons would re-render every time the incremented value changed because the component displaying that value re-renders.
@@locky326 yep, I really missed It. Thanks.
@@bawad This was great. I could get everything now. Thanks again, man!! You are my super hero.
Ben you supposed to explain how to use useCallback, and You assumed that I already know custom hooks and useMemo.
Very useful thanks. Very hard to not get confused between all different hooks . In my app, I m using use effect most of the time, something isn’t probably right.
Brilliant tutorial. Perfect length and depth of explanation.
Best explanation ever.
Love the way u explain, so clean and easy to understand. TY!
Am I the only one that's amazed every video by Ben's keyboard shortcuts?
You should start doing them too
benawad.com/vscode
benawad.com/vim
probably the most helpful video i've seen on react (also native). thank you.
Wish I could have a little Ben in my pocket to carry everywhere I go and he would teach me things when I need 🥴🥴
Lmao that sounds creepy, but i think ben would like that idea
@@mikealejandro3938 Well, now that you said... It really seems weird LOL 😂
Not sure how you eliminated count dependency by using count => count + 1 instead?
Sooo useful, thanks for the explanation
I have learned a lot from this video.
Did not know you could get rid of state (count) like that in useEffect, that's going to be super helpful!
watch useCallback Hook in Hindi in easy way explained
ua-cam.com/video/Gj68rN0vLSc/v-deo.html&ab_channel=Front-EndHacks
Awesome Tutorial! Thanks for your work. Much appreciated
Thanks, Ben. Another great video.
Why we need to add 'setCount' as a dependency of "useCallback", putting the dependency array blank should work fine. Is there any case where the "setCount" function can be changed?
Doesn't using function instead of lambda also recreate functions on each render?
Nice work! Thank you, Ben.
Thanks for good examples! Can i ask what's the reason to use [setCount] as dependency rather than just [ ] since we don't want it to re-render?
The setCount will not be changed in each render after created.
What's the difference if you put the updater function as the dependency and just leaving it as an empty array? Both works.
Brilliant, loved it!
Thanks Ben !!! :) Really clearly explained ! :D
Great video! thanks!
Wait, we can just pass reference to increment function and shallow equal will return true.
const increment =>(){......}
and then pass via props increment={increment}. Ben?We can avoid using useCallback?
useCallback is how you keep the reference the same
Great man, thank you! It helps me a lot
Really useful.
Why setCount is in the second parameter of useCallback. Does react changes its reference on every render?
For useCallback you first use [count, setCount] as its dependencies. Later, at around 5:20, you remove "count" as a dependency for useCallback, leaving only [setCount]. You then changed the setCount to the updater style: setCount(c => c + 1). Why was this necessary? Why not just remove "count" as a dependency and keep setCount(count + 1)?
Try removing count as a dependency and keep it in there, you'll see wonky results.
it has to do with closures: ua-cam.com/video/eTDnfS2_WE4/v-deo.html
If you use setCount(count + 1) inside useCallback and remove count from dependencies array, the value of the count will always be its initial value (ie 0)
Something really helpful not just 'to do list' tutorials
thank you Ben
Thanks Ben!
I forgot what is the difference with setCount(count + 1) and setCount(c => c + 1) ?
At 5:32, why there is a dependency on setCount? setCount is already cached and it will not change.
Because if setCount were to change I want the new value
@@bawad Yes, but setCount is cached and it will not change.
github.com/jamiebuilds/unstated-next/issues/43
great video, helped me a lot
What about data fetching? Lets say i am fetching data in use effect how can i optimize that? So that if fetched data is same, it doesnt rerender that component
Does it compares the old value and new value shallowly or deeply?
This is great! How did i now know this
Hi , I tried to do same thing to useForm but not sure why it still doing re-render . i can share the changes
I don't understand why there's a [setCount] dependency in callback, couldn't it have been just empty [ ]? When will setCount ever change?
useCallback doesn't have any special knowledge of what setCount is. We know that it's a setter from useState, but the code inside useCallback only knows that it is a function. Since functions can be recreated (for example if it was a function that had been defined by another useCallback), we need to know to execute this useCallback again if "setCount" changed definition.
@@TomWacaster Oh, true I didn't even think of that. Thanks!
@@TomWacaster but in this case, we can set the dependency array blank as we are never going to change the setCount function, right?
Just completed vimtutor and I already feel like giving up after watching your vim skills.
Subbed, this is gold
welcome :)
On both of the examples, are you not able to just pass setState to the child component as it is guaranteed to never change? I have a hard time seeing any use cases for useCallback unless the function itself did something computationally expensive. Still a great explanation regardless.
you can pass setState down, but sometimes you want to create a function that you share across multiple components and useCallback is handy there
Thank you so much!
Ben, how to you change cursos type?
Amazing
Thank you!
This made zero sense to me
Why doesn't react memoize renders by default?
Because you generally don't need it
why my components are rendering twice
Maybe your app is wrapped with "React.StrictMode" on index.js. Try removing this.
Thanks Ben , I hope that you can find a way to remove the keyboard voice from the video.
When i try this tutorial in 2022 the count increments like 0,1,3,5,7 ...
in the console but increments normally in the browser view.
Guys I have one question if someone can help me please , so if component is number or string or array or object, Ract.memo is working - that means component will not render if those (data types ) props are same as before. but why does component renders if one of the property is function : just like in this video , if we write even so icrement function is not changing Hello component steel renders every time and we need to use useCallback hook in that case .
So my final question is why does react.memo not working with function properties even so this functions stay same , or do they change in every render ? If function change every time why does people say that " increment={ increment } " is better practise then " increment={ () => setCounter(...) } " - this inline anonymous functions because anonymous functions are created every time when component renders ... I am little confused :D :D
Bad news: the function you pass as the first arg to "useCallback" will still be created on each render 😂
Yup, optimizing apps with React is not the easiest thing
The overhead of recreating the function wasn't what he was trying to avoid as much as re-rendering a potentially large child component to which that function is passed as a prop. That's what he was showing how to avoid
React is so badly designed you have to optimize every bit of it yourself
I didn't get it at all :)
Я не понимаю что ты говоришь.Ну а код нормальный,и хорошо объясняет
why in the heck do we have to be jumping through hoops like this in react? we shouldnt have to be doinf this.
8 mins ago. 8 views.
I have no idea what hes saying. its not good for newbie like me haha