← Back to Blog

Developer's guide to React 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()
3const removeFromCart = () => dispatch(removeItem(product.id))
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(product.id))
3}, [product.id])

Further Reading




Want news and updates?

Join a handful of people who get my latest content and product updates, directly to your inbox.