Child components are not the only time when you will use useCallback. This applies to local functions used within the same component. For example, those used in the useEffect hook.
This is evident if you are using a local function within useEffect and don't include it within the dependencies array. If you're using the eslint plugin for React hooks, you'll get a linting warning which tells you to: 'move the function inside the effect, or wrap it with useCallback.'
I'm highlighting how hooks are used in practice based off of experience, not merely quoting the documentation.
Child components are not the only time when you will use useCallback.
True, but it is a primary use for the hook, which was not mentioned at all, which is why I pointed it out.
This is evident if you are using a local function within useEffect and don't include it within the dependencies array. If you're using the eslint plugin for React hooks, you'll get a linting warning.
The useCallback hook is memoization. Overusing memoization can actually slow code because it's more time-consuming to process than to regenerate simple functions. It often adds complexity with no meaningful benefit.
The scenario you describe should occur only rarely in good code. It is more often a sign of premature optimization when every function is wrapped in useCallback. But how to decide when to or not to? For a good primer I suggest:
I'm highlighting how hooks are used in practice based off of experience, not merely quoting the documentation.
Again, Kudos for taking time to share. However it's good to also grok why documented recommendations are what they are.
I'm a project lead with 30 years experience. I train and mentor devs daily on JavaScript, React, and all things code. I still try to learn something new every day though.
I'm not going to have a discussion about what you think should be emphasized. Everything I mentioned is correct. This is just a quick cheatsheet. They're not supposed to include everything.
Think about others before you comment, please. If you have a suggestion for me, fine. You can send me a message directly and we can talk about it, but there's no need to clutter up what is a cheatsheet for beginners with multiple paragraphs worth of opinions about how the article should be written.
Thanks very much for the article (and entire series), it's a great hooks-first treatment for learning React now. I'm just about to embark on my first React project but have pretty extensive experience in other languages and all the way down to the metal in terms of assembly coding. React is quite a different paradigm to what I'm used to but I'm really interested and excited by it.
The useCallback description did have me scratching my head - I really couldn't see how the performance hit of defining (not calling) an inline function would be that bad in your example when that component re-renders - the rest of the code uses arrow functions a lot which is basically short-hand for the same thing after all.
Kevin's comment did really clear things up for me - I can absolutely see a performance issue when wanting to pass on a callback as a prop to a child component, and how useCallback can therefore prevent those children from re-rendering. The name also makes more sense in that context.
I don't want to add to unnecessary clutter but wanted to add my perspective as someone with coding experience but new to React, and thank Kevin for clearing up the one aspect that was confusing me in the post.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Child components are not the only time when you will use useCallback. This applies to local functions used within the same component. For example, those used in the useEffect hook.
This is evident if you are using a local function within useEffect and don't include it within the dependencies array. If you're using the eslint plugin for React hooks, you'll get a linting warning which tells you to: 'move the function inside the effect, or wrap it with useCallback.'
I'm highlighting how hooks are used in practice based off of experience, not merely quoting the documentation.
True, but it is a primary use for the hook, which was not mentioned at all, which is why I pointed it out.
The useCallback hook is memoization. Overusing memoization can actually slow code because it's more time-consuming to process than to regenerate simple functions. It often adds complexity with no meaningful benefit.
The scenario you describe should occur only rarely in good code. It is more often a sign of premature optimization when every function is wrapped in useCallback. But how to decide when to or not to? For a good primer I suggest:
kentcdodds.com/blog/usememo-and-us...
Again, Kudos for taking time to share. However it's good to also grok why documented recommendations are what they are.
I'm a project lead with 30 years experience. I train and mentor devs daily on JavaScript, React, and all things code. I still try to learn something new every day though.
I'm not going to have a discussion about what you think should be emphasized. Everything I mentioned is correct. This is just a quick cheatsheet. They're not supposed to include everything.
Think about others before you comment, please. If you have a suggestion for me, fine. You can send me a message directly and we can talk about it, but there's no need to clutter up what is a cheatsheet for beginners with multiple paragraphs worth of opinions about how the article should be written.
Hi Reed,
Thanks very much for the article (and entire series), it's a great hooks-first treatment for learning React now. I'm just about to embark on my first React project but have pretty extensive experience in other languages and all the way down to the metal in terms of assembly coding. React is quite a different paradigm to what I'm used to but I'm really interested and excited by it.
The useCallback description did have me scratching my head - I really couldn't see how the performance hit of defining (not calling) an inline function would be that bad in your example when that component re-renders - the rest of the code uses arrow functions a lot which is basically short-hand for the same thing after all.
Kevin's comment did really clear things up for me - I can absolutely see a performance issue when wanting to pass on a callback as a prop to a child component, and how useCallback can therefore prevent those children from re-rendering. The name also makes more sense in that context.
I don't want to add to unnecessary clutter but wanted to add my perspective as someone with coding experience but new to React, and thank Kevin for clearing up the one aspect that was confusing me in the post.