=> {  
    
    
            // 🔴 You can't call useMemo in a loop like this:  
    
    
            const data = useMemo(() => calculateReport(item), [item]);  
    
    
            return (  
    
    
              <figure key={item.id}>  
    
    
                <Chart data={data} />  
    
    
              </figure>  
    
    
            );  
    
    
          })}  
    
    
        </article>  
    
    
      );  
    
    
    }

Instead, extract a component for each item and memoize data for individual
items:

    
    
    function ReportList({ items }) {  
    
    
      return (  
    
    
        <article>  
    
    
          {items.map(item =>  
    
    
            <Report key={item.id} item={item} />  
    
    
          )}  
    
    
        </article>  
    
    
      );  
    
    
    }  
    
    
      
    
    
    function Report({ item }) {  
    
    
      // ✅ Call useMemo at the top level:  
    
    
      const data = useMemo(() => calculateReport(item), [item]);  
    
    
      return (  
    
    
        <figure>  
    
    
          <Chart data={data} />  
    
    
        </figure>  
    
    
      );  
    
    
    }

Alternatively, you could remove ` useMemo ` and instead wrap ` Report ` itself
in [ ` memo ` . ](/reference/react/memo) If the ` item ` prop does not change,
` Report ` will skip re-rendering, so ` Chart ` will skip re-rendering too:

    
    
    function ReportList({ items }) {  
    
    
      // ...  
    
    
    }  
    
    
      
    
    
    const Report = memo(function Report({ item }) {  
    
    
      const data = calculateReport(item);  
    
    
      return (  
    
    
        <figure>  
    
    
          <Chart data={data} />  
    
    
        </figure>  
    
    
      );  
    
    
    });

[ Previous  useLayoutEffect  ](/reference/react/useLayoutEffect) [ Next
useOptimistic  ](/reference/react/useOptimistic)

* * *

How do you like these docs?

[ Take our survey!  ](https://www.surveymonkey.co.uk/r/PYRPF3X)

* * *

[ ](https://opensource.fb.com/)

©  2024

[ Learn React ](/learn)

[ Quick Start ](/learn)

[ Installation ](/learn/installation)

[ Describing the UI ](/learn/describing-the-ui)

[ Adding Interactivity ](/learn/adding-interactivity)

[ Managing State ](/learn/managing-state)

[ Escape Hatches ](/learn/escape-hatches)

[ API Reference ](/reference/react)

[ React APIs ](/reference/react)

[ React DOM APIs ](/reference/react-dom)

[ Community ](/community)

[ Code of Conduct
](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md)

[ Meet the Team ](/community/team)

[ Docs Contributors ](/community/docs-contributors)

[ Acknowledgements ](/community/acknowledgements)

More

[ Blog ](/blog)

[ React Native ](https://reactnative.dev/)

[ Privacy ](https://opensource.facebook.com/legal/privacy)

[ Terms ](https://opensource.fb.com/legal/terms/)

[ ](https://www.facebook.com/react) [ ](https://twitter.com/reactjs) [
](https://github.com/facebook/react)

##  On this page

  * Overview 
  * Reference 
  * ` useMemo(calculateValue, dependencies) `
  * Usage 
  * Skipping expensive recalculations 
  * Skipping re-rendering of components 
  * Memoizing a dependency of another Hook 
  * Memoizing a function 
  * Troubleshooting 
  * My calculation runs twice on every re-render 
  * My ` useMemo ` call is supposed to return an object, but returns undefined 
  * Every time my component renders, the calculation in ` useMemo ` re-runs 
  * I need to call ` useMemo ` for each list item in a loop, but it’s not allowed