What is the difference between useMemo and useCallback?

React recreates values and functions on every render. useMemo lets you reuse the result of an expensive calculation when its inputs have not changed. useCallback is the function-specific version: it returns the same function identity until dependencies change.

function ProductList({ products, query }) {
  const visible = useMemo(() => {
    return products.filter((product) =>
      product.name.toLowerCase().includes(query.toLowerCase()),
    );
  }, [products, query]);

  const handleSelect = useCallback((id) => {
    console.log("selected", id);
  }, []);

  return <List items={visible} onSelect={handleSelect} />;
}

When they are useful

• A calculation is genuinely expensive and runs on many renders
• A stable function identity is required by React.memo or an effect dependency
• A value is passed to a memoized child or a dependency array
• A referential identity matters to a third-party API

Memoization has a cost: React stores the previous value and compares dependencies. Wrapping every value and callback can make code noisier without improving performance. Measure first, and remember that the React Compiler can automate some of this in projects that use it.