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.
const dispatch = useDispatch()const removeFromCart = () => dispatch(removeItem(product.id))return <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.
const removeFromCart = React.useCallback(() => { dispatch(removeItem(product.id))}, [product.id])
