Jacob Paris
← Back to all content

Understanding React's useCallback

This is a special case for memoizing functions. Since javascript compares equality by reference, the function you create the first time a component renders will be different than the one created in subsequent renders.

If you try passing a function as props or state, this means that it will be treated as a prop change every single time. By wrapping it in useCallback, React will know that it's the same function. You can still add a dependency array to trigger a recalculation if the dependencies change.

A strong use-case here to avoid child component re-renders

Every time this component renders, it will also trigger a whole re-render of the Button component because the removeFromCart function is unique every time.

1const dispatch = useDispatch()
2
3const removeFromCart = () => dispatch(removeItem(product.id))
4
5return <Button onClick={removeFromCart}>Delete</Button>
6

Replacing our callback with this will avoid that problem entirely. Now the Button will only re-render when our product ID changes, so that it will function to remove the new product from our cart.

1const removeFromCart = React.useCallback(() => {
2 dispatch(removeItem(product.id))
3}, [product.id])
4

Further Reading

https://kentcdodds.com/blog/usememo-and-usecallback

https://stackoverflow.com/questions/54371244/what-is-the-intention-of-using-reacts-usecallback-hook-in-place-of-useeffect

https://stackoverflow.com/questions/54963248/whats-the-difference-between-usecallback-and-usememo-in-practice/54965033#54965033

Professional headshot

Hi, I'm Jacob

Hey there! I'm a developer, designer, and digital nomad with a background in lean manufacturing.

About once per month, I send an email with new guides, new blog posts, and sneak peeks of what's coming next.

Everyone who subscribes gets access to the source code for this website and every example project for all my tutorials.

Stay up to date with everything I'm working on by entering your email below.

Unsubscribe at any time.