lways creates a
_different_ function, ** similar to how the ` {} ` object literal always
creates a new object. Normally, this wouldn’t be a problem, but it means that
` ShippingForm ` props will never be the same, and your [ ` memo `
](/reference/react/memo) optimization won’t work. This is where ` useCallback
` comes in handy:

    
    
    function ProductPage({ productId, referrer, theme }) {  
    
    
      // Tell React to cache your function between re-renders...  
    
    
      const handleSubmit = useCallback((orderDetails) => {  
    
    
        post('/product/' + productId + '/buy', {  
    
    
          referrer,  
    
    
          orderDetails,  
    
    
        });  
    
    
      }, [productId, referrer]); // ...so as long as these dependencies don't change...  
    
    
      
    
    
      return (  
    
    
        <div className={theme}>  
    
    
          {/* ...ShippingForm will receive the same props and can skip re-rendering */}  
    
    
          <ShippingForm onSubmit={handleSubmit} />  
    
    
        </div>  
    
    
      );  
    
    
    }

**By wrapping` handleSubmit ` in ` useCallback ` , you ensure that it’s the
_same_ function between the re-renders ** (until dependencies change). You
don’t _have to_ wrap a function in ` useCallback ` unless you do it for some
specific reason. In this example, the reason is that you pass it to a
component wrapped in [ ` memo ` , ](/reference/react/memo) and this lets it
skip re-rendering. There are other reasons you might need ` useCallback `
which are described further on this page.

###  Note

**You should only rely on` useCallback ` as a performance optimization. ** If
your code doesn’t work without it, find the underlying problem and fix it
first. Then you may add ` useCallback ` back.

#####  Deep Dive

####  How is useCallback related to useMemo?

Show Details

You will often see [ ` useMemo ` ](/reference/react/useMemo) alongside `
useCallback ` . They are both useful when you’re trying to optimize a child
component. They let you [ memoize ](https://en.wikipedia.org/wiki/Memoization)
(or, in other words, cache) something you’re passing down:

    
    
    import { useMemo, useCallback } from 'react';  
    
    
      
    
    
    function ProductPage({ productId, referrer }) {  
    
    
      const product = useData('/product/' + productId);  
    
    
      
    
    
      const requirements = useMemo(() => { // Calls your function and caches its result  
    
    
        return computeRequirements(product);  
    
    
      }, [product]);  
    
    
      
    
    
      const handleSubmit = useCallback((orderDetails) => { // Caches your function itself  
    
    
        post('/product/' + productId + '/buy', {  
    
    
          referrer,  
    
    
          orderDetails,  
    
    
        });  
    
    
      }, [productId, referrer]);  
    
    
      
    
    
      return (  
    
    
        <div className={theme}>  
    
    
          <ShippingForm requirements={requirements} onSubmit={handleSubmit} />  
    
    
        </div>  
    
    
      );  
    
    
    }

The difference is in _what_ they’re letting you cache:

  * **[ ` useMemo ` ](/reference/react/useMemo) caches the _result_ of calling your function. ** In this example, it caches the result of calling ` computeRequirements(product) ` so that it doesn’t change unless ` product ` has changed. This lets you pass the ` requirements ` object down without unnecessarily re-rendering ` ShippingForm ` . When necessary, React will call the function you’ve passed during rendering to calculate the result. 
  * **` useCallback ` caches _the function itself._ ** Unlike ` useMemo ` , it does not call the function you provide. Instead, it caches the function you provided so that ` handleSubmit ` _itself_ doesn’t change unless ` productId ` or ` referrer ` has changed. This lets you pass the ` handleSubmit ` function down without unnecessa