e user’s new choice on the screen.

Next, try toggling the theme. **Thanks to` useMemo ` together with [ ` memo `
](/reference/react/memo) , it’s fast despite the artificial slowdown! ** The `
List ` skipped re-rendering because the ` visibleTodos ` array has not changed
since the last render. The ` visibleTodos ` array has not changed because both
` todos ` and ` tab ` (which you pass as dependencies to ` useMemo ` ) haven’t
changed since the last render.

App.js  TodoList.js  List.js  utils.js

TodoList.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    import { useMemo } from 'react';
    import List from './List.js';
    import { filterTodos } from './utils.js'
    
    export default function TodoList({ todos, theme, tab }) {
      const visibleTodos = useMemo(
        () => filterTodos(todos, tab),
        [todos, tab]
      );
      return (
        <div className={theme}>
          <p><b>Note: <code>List</code> is artificially slowed down!</b></p>
          <List items={visibleTodos} />
        </div>
      );
    }
    
    

Show more

Next  Example

* * *

###  Memoizing a dependency of another Hook

Suppose you have a calculation that depends on an object created directly in
the component body:

    
    
    function Dropdown({ allItems, text }) {  
    
    
      const searchOptions = { matchMode: 'whole-word', text };  
    
    
      
    
    
      const visibleItems = useMemo(() => {  
    
    
        return searchItems(allItems, searchOptions);  
    
    
      }, [allItems, searchOptions]); // 🚩 Caution: Dependency on an object created in the component body  
    
    
      // ...

Depending on an object like this defeats the point of memoization. When a
component re-renders, all of the code directly inside the component body runs
again. **The lines of code creating the` searchOptions ` object will also run
on every re-render. ** Since ` searchOptions ` is a dependency of your `
useMemo ` call, and it’s different every time, React knows the dependencies
are different, and recalculate ` searchItems ` every time.

To fix this, you could memoize the ` searchOptions ` object _itself_ before
passing it as a dependency:

    
    
    function Dropdown({ allItems, text }) {  
    
    
      const searchOptions = useMemo(() => {  
    
    
        return { matchMode: 'whole-word', text };  
    
    
      }, [text]); // ✅ Only changes when text changes  
    
    
      
    
    
      const visibleItems = useMemo(() => {  
    
    
        return searchItems(allItems, searchOptions);  
    
    
      }, [allItems, searchOptions]); // ✅ Only changes when allItems or searchOptions changes  
    
    
      // ...

In the example above, if the ` text ` did not change, the ` searchOptions `
object also won’t change. However, an even better fix is to move the `
searchOptions ` object declaration _inside_ of the ` useMemo ` calculation
function:

    
    
    function Dropdown({ allItems, text }) {  
    
    
      const visibleItems = useMemo(() => {  
    
    
        const searchOptions = { matchMode: 'whole-word', text };  
    
    
        return searchItems(allItems, searchOptions);  
    
    
      }, [allItems, text]); // ✅ Only changes when allItems or text changes  
    
    
      // ...

Now your calculation depends on ` text ` directly (which is a string and can’t
“accidentally” become different).

* * *

###  Memoizing a function

Suppose the ` Form ` component is wrapped in [ ` memo ` .
](/reference/react/memo) You want to pass a function to it as a prop:

    
    
    export default function ProductPage({ productId, referrer }) {  
    
    
      function handleSubmit(orderDetails) {  
    
    
        post('/product/' + productId + '/buy', {  
    
    
          referrer,  
    
    
          orderDetails  
    
    
        });  
    
    
      }  
    
    
      
    
    
      retu