youtube.com/watch?v=lGEMwh32soc) to solve this
once and for all.

####  The difference between useMemo and calculating a value directly

1  .  Skipping recalculation with ` useMemo ` 2  .  Always recalculating a
value

####

Example  1  of  2  :

Skipping recalculation with ` useMemo `

In this example, the ` filterTodos ` implementation is **artificially slowed
down** so that you can see what happens when some JavaScript function you’re
calling during rendering is genuinely slow. Try switching the tabs and
toggling the theme.

Switching the tabs feels slow because it forces the slowed down ` filterTodos
` to re-execute. That’s expected because the ` tab ` has changed, and so the
entire calculation _needs_ to re-run. (If you’re curious why it runs twice,
it’s explained  here.  )

Toggle the theme. **Thanks to` useMemo ` , it’s fast despite the artificial
slowdown! ** The slow ` filterTodos ` call was skipped because both ` todos `
and ` tab ` (which you pass as dependencies to ` useMemo ` ) haven’t changed
since the last render.

App.js  TodoList.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 { 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>filterTodos</code> is artificially slowed down!</b></p>
          <ul>
            {visibleTodos.map(todo => (
              <li key={todo.id}>
                {todo.completed ?
                  
{todo.text}
 :
                  todo.text
                }
              </li>
            ))}
          </ul>
        </div>
      );
    }
    
    

Show more

Next  Example

* * *

###  Skipping re-rendering of components

In some cases, ` useMemo ` can also help you optimize performance of re-
rendering child components. To illustrate this, let’s say this ` TodoList `
component passes the ` visibleTodos ` as a prop to the child ` List `
component:

    
    
    export default function TodoList({ todos, tab, theme }) {  
    
    
      // ...  
    
    
      return (  
    
    
        <div className={theme}>  
    
    
          <List items={visibleTodos} />  
    
    
        </div>  
    
    
      );  
    
    
    }

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

**By default, when a component re-renders, React re-renders all of its
children recursively.** This is why, when ` TodoList ` re-renders with a
different ` theme ` , the ` List ` component _also_ re-renders. This is fine
for components that don’t require much calculation to re-render. But if you’ve
verified that a re-render is slow, you can tell ` List ` 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 List = memo(function List({ items }) {  
    
    
      // ...  
    
    
    });

**With this change,` List ` will skip re-rendering if all of its props are the
_same_ as on the last render. ** This is where caching the calculation becomes
important! Imagine that you calculated ` visibleTodos ` without ` useMemo ` :

    
    
    export default function TodoList({ todos, tab, theme }) {  
    
    
      // Every time the theme changes, this will be a different array...  
    
    
      const visibleTodos = filterTodos(todos, tab);  
    
    
      return (  
    
    
        <div className={theme}>  
    
    
          {/* ... so List's props will never be the same, and it will re-render every time