What does useCallback do, and when is it useful?

Direct answer

useCallback caches a function definition between renders while its dependencies remain unchanged, mainly when function identity affects a memoized child or another Hook.

ProductPage.jsx

function ProductPage({ productId }) {
  const handleBuy = useCallback(() => {
    purchase(productId);
  }, [productId]);

  return <MemoizedBuyButton onBuy={handleBuy} />;
}

Creating a new JavaScript function is usually cheap. The benefit comes when a stable function identity prevents downstream work such as re-rendering a memoized child or re-synchronizing an Effect.