Developer's guide to React useCallback

Last updated August 31, 2021 by Jacob Paris

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()
3const removeFromCart = () => dispatch(removeItem(
5return <Button onClick={removeFromCart}>Delete</Button>

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(
3}, [])

Further Reading