optimize rendering performance, you will sometimes need to cache the
functions that you pass to child components. Let’s first look at the syntax
for how to do this, and then see in which cases it’s useful.

To cache a function between re-renders of your component, wrap its definition
into the ` useCallback ` Hook:

    
    
    import { useCallback } from 'react';  
    
    
      
    
    
    function ProductPage({ productId, referrer, theme }) {  
    
    
      const handleSubmit = useCallback((orderDetails) => {  
    
    
        post('/product/' + productId + '/buy', {  
    
    
          referrer,  
    
    
          orderDetails,  
    
    
        });  
    
    
      }, [productId, referrer]);  
    
    
      // ...

You need to pass two things to ` useCallback ` :

  1. A function definition that you want to cache between re-renders. 
  2. A  list of dependencies  including every value within your component that’s used inside your function. 

On the initial render, the  returned function  you’ll get from ` useCallback `
will be the function you passed.

On the following renders, React will compare the  dependencies  with the
dependencies you passed during the previous render. If none of the
dependencies have changed (compared with [ ` Object.is `
](https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) ), ` useCallback `
will return the same function as before. Otherwise, ` useCallback ` will
return the function you passed on _this_ render.

In other words, ` useCallback ` caches a function between re-renders until its
dependencies change.

**Let’s walk through an example to see when this is useful.**

Say you’re passing a ` handleSubmit ` function down from the ` ProductPage `
to the ` ShippingForm ` component:

    
    
    function ProductPage({ productId, referrer, theme }) {  
    
    
      // ...  
    
    
      return (  
    
    
        <div className={theme}>  
    
    
          <ShippingForm onSubmit={handleSubmit} />  
    
    
        </div>  
    
    
      );

You’ve noticed that toggling the ` theme ` prop freezes the app for a moment,
but if you remove ` <ShippingForm /> ` from your JSX, it feels fast. This
tells you that it’s worth trying to optimize the ` ShippingForm ` component.

**By default, when a component re-renders, React re-renders all of its
children recursively.** This is why, when ` ProductPage ` re-renders with a
different ` theme ` , the ` ShippingForm ` component _also_ re-renders. This
is fine for components that don’t require much calculation to re-render. But
if you verified a re-render is slow, you can tell ` ShippingForm ` to skip re-
rendering when its props are the same as on last render by wrapping it in [ `
memo ` : ](/reference/react/memo)

    
    
    import { memo } from 'react';  
    
    
      
    
    
    const ShippingForm = memo(function ShippingForm({ onSubmit }) {  
    
    
      // ...  
    
    
    });

**With this change,` ShippingForm ` will skip re-rendering if all of its props
are the _same_ as on the last render. ** This is when caching a function
becomes important! Let’s say you defined ` handleSubmit ` without `
useCallback ` :

    
    
    function ProductPage({ productId, referrer, theme }) {  
    
    
      // Every time the theme changes, this will be a different function...  
    
    
      function handleSubmit(orderDetails) {  
    
    
        post('/product/' + productId + '/buy', {  
    
    
          referrer,  
    
    
          orderDetails,  
    
    
        });  
    
    
      }  
    
    
        
    
    
      return (  
    
    
        <div className={theme}>  
    
    
          {/* ... so ShippingForm's props will never be the same, and it will re-render every time */}  
    
    
          <ShippingForm onSubmit={handleSubmit} />  
    
    
        </div>  
    
    
      );  
    
    
    }

**In JavaScript, a` function () {} ` or ` () => {