Stop This Mistake | When to use useCallback and React Memo? | Real World React Hooks Examples!

In this video, we are going to talk about React hooks and specifically discuss one particular hooks called useCallback. We going to look at a use-case where this hook would be useful and help us improve the performance. We are also going to look at React.memo, understand how it works and how it can help us stop extra re-renders.
Book A Mock Interview Session: topmate.io/yomeshgupta
Support Us: devtools.tech/support
Try now using the links below
devtools.tech/questions/all?t...
devtools.tech/list/all
You can support our channel via:
rzp.io/l/support-devtools-tech
devtoolstech.gumroad.com/l/su...
www.buymeacoffee.com/yomeshgupta
************************************************************
Devtools Tech is a KZbin channel started as a collaborative effort among like-minded engineers to provide high-quality programming tutorials for free. We firmly believe in knowledge sharing and easy access to quality content for everyone. Hence, this channel is an effort to give back to the community and a step toward our belief -- "We rise by lifting others".
Interview questions: devtools.tech/questions/all?r...
Interview resources: devtools.tech/resources/all?r...
Hidden Gem: devtools.tech/crazyones
Team Members:
Yomesh Gupta
Portfolio: yomeshgupta.com
LinkedIn: / yomeshgupta
Twitter: / yomeshgupta
#javascript #devtoolstech #web #frontend #interviewquestions #devtoolstech #code #programming #developement #hooks #code #usecallback #reactjs
***********************************************************

[@DevtoolsTech]

Learn with me: topmate.io/yomeshgupta Practice Questions: devtools.tech/questions/all

[@mohdamir3767]

It's 4 in the morning and I just learned something useful and new.

[@DevtoolsTech]

Glad to hear that! 🙌🏼

[@darshilvaria441]

The explanation about when to use useCallback hook was so on point. Most of the videos I’ve came across, they forgot to mention that useCallback should be used only when non primitive prop gets passed to children and that prop gets used inside hook with dependency value. Thank you! Subscribed

[@DevtoolsTech]

Our content aims to share knowledge that most people aren't talking about or forget to mention. Thank you for subscribing! Much more coming soon!

[@yashmundra8497]

Awesome video with clear and precise explanation about the confusing concepts like memo() , useCallback() and when to use what !!!

[@DevtoolsTech]

Glad it was helpful! 🙌🏼

[@IshikaAgarwal-bh4ry]

How do we decide when to use useMemo? Because I'm not sure if it's a good practice to wrap every child component with useMemo. For useCallback, it's clear. Thanks for the video!

[@DevtoolsTech]

If there is a value inside your component that is computed on every render but it shouldn't be then you can opt for useMemo. If you have a state that changes some trigger such as user action and based on the state you are computing a config then opt for useMemo. A component can re-render due to other states or props change but config is only computed if a certain state is changed so memoisation would be helpful.

[@mayurwankhade7447]

Which extension you are using to show errors like that? Is it eslint related or something else?

[@DevtoolsTech]

It is ESLint only.

[@johndoe-cq3de]

Great explanation as usual! I've one doubt. Why didn't the recommendations use Effect ran when the filters state was changed.? But filter useffect ran when recommendations state was changed Is it because of the ordering of the useEffect?

[@DevtoolsTech]

When filters state was changed by then recommendations was already unmounted. The effect can't run if the component is not part of the tree. It depends upon order of invocation i.e. which state do you change first not on useEffect order. I hope it helps!

[@johndoe-cq3de]

@@DevtoolsTech ah thanks man! I feel dumb now lol. So, if we had clicked recommendations before clicking the filters, it would have happened right

[@DevtoolsTech]

No worries!