useMemo

const cachedValue = useMemo(calculateValue, dependencies)

• 参考
  • useMemo(calculateValue, dependencies)
• 用法
  • 跳过昂贵的重新计算
  • 跳过组件的重新渲染
  • 防止副作用过于频繁地触发
  • 记忆化另一个钩子的依赖
  • 记忆化一个函数
• 故障排除
  • 我的计算在每次重新渲染时运行两次
  • 我的 useMemo 调用应该返回一个对象，但返回了未定义
  • 每次我的组件渲染时，useMemo 中的计算都会重新运行
  • 我需要在循环中为每个列表项调用 useMemo，但这是不允许的

参考

🌐 Reference

useMemo(calculateValue, dependencies)

在组件的顶层调用 useMemo 来在重新渲染之间缓存计算结果：

🌐 Call useMemo at the top level of your component to cache a calculation between re-renders:

import { useMemo } from 'react';

function TodoList({ todos, tab }) {
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab]
  );
  // ...
}

查看更多示例。

参数

🌐 Parameters

• calculateValue：计算你想要缓存的值的函数。它应该是纯函数，不应接收任何参数，并且应返回任何类型的值。React 会在初始渲染期间调用你的函数。在随后的渲染中，如果自上次渲染以来 dependencies 没有改变，React 会再次返回相同的值。否则，它将调用 calculateValue，返回其结果，并将其存储以便以后重用。
• dependencies：calculateValue 代码中引用的所有响应式值的列表。响应式值包括 props、state，以及在组件主体中直接声明的所有变量和函数。如果你的代码检查器为 React 配置，它将验证每个响应式值是否被正确指定为依赖。依赖列表必须有一个固定数量的项目，并且必须像 [dep1, dep2, dep3] 一样内联编写。React 将使用 Object.is 比较每个依赖与其先前的值。

返回

🌐 Returns

在初次渲染时，useMemo 返回调用 calculateValue 无参数时的结果。

🌐 On the initial render, useMemo returns the result of calling calculateValue with no arguments.

在接下来的渲染中，它要么返回上一次渲染中已存储的值（如果依赖没有变化），要么再次调用 calculateValue，并返回 calculateValue 返回的结果。

🌐 During next renders, it will either return an already stored value from the last render (if the dependencies haven’t changed), or call calculateValue again, and return the result that calculateValue has returned.

注意事项

🌐 Caveats

• useMemo 是一个 Hook，因此你只能在你的组件的顶层或你自己的 Hook 中调用它。你不能在循环或条件语句中调用它。如果你需要那样做，可以提取一个新组件并将状态移入其中。
• 在严格模式下，React 会调用你的计算函数两次，以便帮助你发现意外的副作用。这是仅在开发环境下的行为，对生产环境没有影响。如果你的计算函数是纯函数（它应该是纯函数），这不会影响你的逻辑。其中一次调用的结果将被忽略。
• React 不会丢弃缓存的值，除非有特定的原因这么做。 例如，在开发环境中，当你编辑组件文件时，React 会丢弃缓存。在开发环境和生产环境中，如果你的组件在初次挂载时挂起，React 也会丢弃缓存。未来，React 可能会增加更多利用丢弃缓存的功能——例如，如果未来 React 对虚拟列表提供内置支持，那么丢弃滚出虚拟表视口的项目的缓存是有意义的。如果你仅仅依赖 useMemo 作为性能优化，这应该没问题。否则，状态变量 或 ref 可能更合适。

用法

🌐 Usage

跳过昂贵的重新计算

🌐 Skipping expensive recalculations

为了在重新渲染之间缓存计算结果，请在组件的顶层将其封装在 useMemo 调用中：

🌐 To cache a calculation between re-renders, wrap it in a useMemo call at the top level of your component:

import { useMemo } from 'react';

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

你需要传递两样东西给 useMemo：

🌐 You need to pass two things to useMemo:

1. 一个不带参数的 计算函数 ，像 () =>，并返回你想要计算的结果。
2. 一个依赖列表，包括你组件中用于计算的每一个值。

在初始渲染时，你从 useMemo 获取的 值 将是调用你的 计算的结果。

在每次后续渲染时，React 会将 依赖 与你在上一次渲染中传递的依赖进行比较。如果没有任何依赖发生变化（与 Object.is 相比），useMemo 将返回你之前计算的值。否则，React 会重新运行你的计算并返回新值。

换句话说，useMemo 会在重新渲染之间缓存计算结果，直到其依赖发生变化。

🌐 In other words, useMemo caches a calculation result between re-renders until its dependencies change.

让我们通过一个例子来看看这什么时候有用。

默认情况下，每次 React 重新渲染时，都会重新运行组件的整个主体。例如，如果这个 TodoList 更新了它的状态或从其父组件接收到新的 props，filterTodos 函数将会重新运行：

🌐 By default, React will re-run the entire body of your component every time that it re-renders. For example, if this TodoList updates its state or receives new props from its parent, the filterTodos function will re-run:

function TodoList({ todos, tab, theme }) {
  const visibleTodos = filterTodos(todos, tab);
  // ...
}

通常，这不是问题，因为大多数计算都非常快。然而，如果你在过滤或转换一个大型数组，或者进行一些耗资源的计算，你可能希望在数据没有变化的情况下跳过再次计算。如果 todos 和 tab 与上一次渲染时相同，那么像之前那样将计算封装在 useMemo 中可以让你重用之前已经计算过的 visibleTodos。

🌐 Usually, this isn’t a problem because most calculations are very fast. However, if you’re filtering or transforming a large array, or doing some expensive computation, you might want to skip doing it again if data hasn’t changed. If both todos and tab are the same as they were during the last render, wrapping the calculation in useMemo like earlier lets you reuse visibleTodos you’ve already calculated before.

这种类型的缓存被称为 记忆化

🌐 This type of caching is called memoization.

console.time('filter array');
const visibleTodos = filterTodos(todos, tab);
console.timeEnd('filter array');

console.time('filter array');
const visibleTodos = useMemo(() => {
  return filterTodos(todos, tab); // Skipped if todos and tab haven't changed
}, [todos, tab]);
console.timeEnd('filter array');

跳过组件的重新渲染

🌐 Skipping re-rendering of components

在某些情况下，useMemo 也可以帮助你优化子组件的重新渲染性能。为说明这一点，假设这个 TodoList 组件将 visibleTodos 作为 prop 传递给子组件 List：

🌐 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>
  );
}

你已经注意到切换 theme 属性会让应用暂时冻结，但如果你从 JSX 中移除 <List />，应用感觉很快。这说明值得尝试优化 List 组件。

🌐 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.

默认情况下，当一个组件重新渲染时，React 会递归地重新渲染它的所有子组件。 这就是为什么当 TodoList 在 theme 不同的情况下重新渲染时，List 组件也会重新渲染。这对于不需要大量计算的组件来说是可以的。但是，如果你已经确认重新渲染很慢，你可以通过将 List 封装在 memo: 中来告诉它在 props 与上次渲染相同时跳过重新渲染。

import { memo } from 'react';

const List = memo(function List({ items }) {
  // ...
});

有了这个改变，如果 List 的所有属性与上一次渲染时相同，它将跳过重新渲染。 这就是为什么缓存计算变得很重要的原因！想象一下，你在没有 useMemo 的情况下计算了 visibleTodos：

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}>
      
      <List items={visibleTodos} />
    </div>
  );
}

在上述示例中，filterTodos 函数总是创建一个不同的数组， 类似于 {} 对象字面量总是创建一个新对象。通常，这不会成为问题，但这意味着 List 属性永远不会相同，并且你的 memo 优化将不起作用。这就是 useMemo 派上用场的地方：

export default function TodoList({ todos, tab, theme }) {
  // Tell React to cache your calculation between re-renders...
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab] // ...so as long as these dependencies don't change...
  );
  return (
    <div className={theme}>
      
      <List items={visibleTodos} />
    </div>
  );
}

通过将 visibleTodos 计算封装在 useMemo 中，你可以确保它在重新渲染之间具有 相同 的值（直到依赖发生变化）。除非出于某些特定原因，否则你不 必需 将计算封装在 useMemo 中。在这个例子中，原因是你将它传递给一个通过 memo, 封装的组件，这样可以让组件跳过重新渲染。还有一些添加 useMemo 的其他原因，这些原因在本页的后面有描述。

export default function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  const children = useMemo(() => <List items={visibleTodos} />, [visibleTodos]);
  return (
    <div className={theme}>
      {children}
    </div>
  );
}

防止副作用过于频繁地触发

🌐 Preventing an Effect from firing too often

有时，你可能想在 Effect: 中使用一个值

🌐 Sometimes, you might want to use a value inside an Effect:

function ChatRoom({ roomId }) {
  const [message, setMessage] = useState('');

  const options = {
    serverUrl: 'https://localhost:1234',
    roomId: roomId
  }

  useEffect(() => {
    const connection = createConnection(options);
    connection.connect();
    // ...

这会导致一个问题。每个响应式值都必须被声明为你的 Effect 的依赖。 但是，如果你将 options 声明为依赖，它将导致你的 Effect 不断重新连接到聊天室：

🌐 This creates a problem. Every reactive value must be declared as a dependency of your Effect. However, if you declare options as a dependency, it will cause your Effect to constantly reconnect to the chat room:

  useEffect(() => {
    const connection = createConnection(options);
    connection.connect();
    return () => connection.disconnect();
  }, [options]); // 🔴 Problem: This dependency changes on every render
  // ...

为了解决这个问题，你可以在 useMemo 中封装你需要从 Effect 调用的对象：

🌐 To solve this, you can wrap the object you need to call from an Effect in useMemo:

function ChatRoom({ roomId }) {
  const [message, setMessage] = useState('');

  const options = useMemo(() => {
    return {
      serverUrl: 'https://localhost:1234',
      roomId: roomId
    };
  }, [roomId]); // ✅ Only changes when roomId changes

  useEffect(() => {
    const connection = createConnection(options);
    connection.connect();
    return () => connection.disconnect();
  }, [options]); // ✅ Only changes when options changes
  // ...

这确保如果 useMemo 返回缓存的对象，options 对象在重新渲染之间是相同的。

🌐 This ensures that the options object is the same between re-renders if useMemo returns the cached object.

但是，由于 useMemo 是性能优化，而不是语义保证，如果有具体原因，React 可能会丢弃缓存的值。这也会导致 effect 重新触发，因此通过将对象放入 Effect 内，可以更好地消除对函数依赖的需求：

🌐 However, since useMemo is performance optimization, not a semantic guarantee, React may throw away the cached value if there is a specific reason to do that. This will also cause the effect to re-fire, so it’s even better to remove the need for a function dependency by moving your object inside the Effect:

function ChatRoom({ roomId }) {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const options = { // ✅ No need for useMemo or object dependencies!
      serverUrl: 'https://localhost:1234',
      roomId: roomId
    }

    const connection = createConnection(options);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // ✅ Only changes when roomId changes
  // ...

现在你的代码更简单，不需要 useMemo。了解更多关于移除 Effect 依赖的信息。

🌐 Now your code is simpler and doesn’t need useMemo. Learn more about removing Effect dependencies.

记忆化另一个钩子的依赖

🌐 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
  // ...

依赖像这样的对象会违背记忆化的目的。当一个组件重新渲染时，组件体内的所有代码都会再次运行。**创建 searchOptions 对象的代码行也会在每次重新渲染时运行。**由于 searchOptions 是你 useMemo 调用的依赖，并且每次都不同，React 会知道依赖不同，因此每次都会重新计算 searchItems。

🌐 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.

要解决这个问题，你可以在将 searchOptions 对象作为依赖传递之前对其 本身 进行记忆化处理：

🌐 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
  // ...

在上面的例子中，如果 text 没有变化，searchOptions 对象也不会变化。然而，一个更好的修复方法是将 searchOptions 对象声明放到 useMemo 计算函数内部：

🌐 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
  // ...

现在你的计算直接依赖于 text（它是一个字符串，不能“意外”变成不同的值）。

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

记忆化一个函数

🌐 Memoizing a function

假设 Form 组件被 memo. 封装。你想将一个函数作为 prop 传给它：

🌐 Suppose the Form component is wrapped in 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
    });
  }

  return <Form onSubmit={handleSubmit} />;
}

正如 {} 会创建一个不同的对象一样，像 function() {} 这样的函数声明和像 () => {} 这样的表达式在每次重新渲染时也会生成一个不同的函数。单独来看，创建一个新函数本身并不是问题。这不是需要避免的事情！然而，如果 Form 组件被进行了 memo 化，通常你希望在属性未改变时跳过重新渲染。一个总是不同的属性会破坏 memo 化的意义。

🌐 Just as {} creates a different object, function declarations like function() {} and expressions like () => {} produce a different function on every re-render. By itself, creating a new function is not a problem. This is not something to avoid! However, if the Form component is memoized, presumably you want to skip re-rendering it when no props have changed. A prop that is always different would defeat the point of memoization.

要使用 useMemo 对一个函数进行记忆化，你的计算函数必须返回另一个函数：

🌐 To memoize a function with useMemo, your calculation function would have to return another function:

export default function Page({ productId, referrer }) {
  const handleSubmit = useMemo(() => {
    return (orderDetails) => {
      post('/product/' + productId + '/buy', {
        referrer,
        orderDetails
      });
    };
  }, [productId, referrer]);

  return <Form onSubmit={handleSubmit} />;
}

这看起来很笨重！记忆化函数足够常见，以至于 React 特意提供了一个内置 Hook 来处理这个问题。将你的函数封装到 useCallback 中，而不是 useMemo，以避免必须编写额外的嵌套函数：

🌐 This looks clunky! Memoizing functions is common enough that React has a built-in Hook specifically for that. Wrap your functions into useCallback instead of useMemo to avoid having to write an extra nested function:

export default function Page({ productId, referrer }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails
    });
  }, [productId, referrer]);

  return <Form onSubmit={handleSubmit} />;
}

上面的两个例子完全等价。useCallback 唯一的好处是它可以让你避免在内部编写额外的嵌套函数。它没有其他作用。阅读更多关于 useCallback 的内容。

🌐 The two examples above are completely equivalent. The only benefit to useCallback is that it lets you avoid writing an extra nested function inside. It doesn’t do anything else. Read more about useCallback.

故障排除

🌐 Troubleshooting

我的计算在每次重新渲染时运行两次

🌐 My calculation runs twice on every re-render

在 严格模式 下，React 会调用你的一些函数两次，而不是一次：

🌐 In Strict Mode, React will call some of your functions twice instead of once:

function TodoList({ todos, tab }) {
  // This component function will run twice for every render.

  const visibleTodos = useMemo(() => {
    // This calculation will run twice if any of the dependencies change.
    return filterTodos(todos, tab);
  }, [todos, tab]);

  // ...

这是预期的，不应破坏你的代码。

🌐 This is expected and shouldn’t break your code.

这种仅在开发模式下的行为可以帮助你保持组件的纯粹性。React 会使用其中一次调用的结果，并忽略另一次调用的结果。只要你的组件和计算函数是纯函数，这不应影响你的逻辑。然而，如果它们意外地不是纯函数，这将帮助你注意到并修复错误。

🌐 This development-only behavior helps you keep components pure. React uses the result of one of the calls, and ignores the result of the other call. As long as your component and calculation functions are pure, this shouldn’t affect your logic. However, if they are accidentally impure, this helps you notice and fix the mistake.

例如，这个不纯的计算函数会改变你作为属性收到的数组：

🌐 For example, this impure calculation function mutates an array you received as a prop:

  const visibleTodos = useMemo(() => {
    // 🚩 Mistake: mutating a prop
    todos.push({ id: 'last', text: 'Go for a walk!' });
    const filtered = filterTodos(todos, tab);
    return filtered;
  }, [todos, tab]);

React 会调用你的函数两次，所以你会注意到待办事项被添加了两次。你的计算不应该更改任何现有对象，但可以更改在计算过程中创建的任何新对象。例如，如果 filterTodos 函数总是返回一个不同的数组，你可以修改那个数组：

🌐 React calls your function twice, so you’d notice the todo is added twice. Your calculation shouldn’t change any existing objects, but it’s okay to change any new objects you created during the calculation. For example, if the filterTodos function always returns a different array, you can mutate that array instead:

  const visibleTodos = useMemo(() => {
    const filtered = filterTodos(todos, tab);
    // ✅ Correct: mutating an object you created during the calculation
    filtered.push({ id: 'last', text: 'Go for a walk!' });
    return filtered;
  }, [todos, tab]);

阅读 保持组件纯粹 以了解更多关于纯粹的信息。

🌐 Read keeping components pure to learn more about purity.

另外，请查看关于更新对象和更新数组而不进行修改的指南。

🌐 Also, check out the guides on updating objects and updating arrays without mutation.

我的 useMemo 调用应该返回一个对象，但返回了未定义

🌐 My useMemo call is supposed to return an object, but returns undefined

此代码不起作用：

🌐 This code doesn’t work:

  // 🔴 You can't return an object from an arrow function with () => {
  const searchOptions = useMemo(() => {
    matchMode: 'whole-word',
    text: text
  }, [text]);

在 JavaScript 中，() => { 开始箭头函数的函数体，因此 { 大括号不是你的对象的一部分。这就是为什么它不返回对象，并且会导致错误。你可以通过添加括号来修复它，如 ({ 和 }):

🌐 In JavaScript, () => { starts the arrow function body, so the { brace is not a part of your object. This is why it doesn’t return an object, and leads to mistakes. You could fix it by adding parentheses like ({ and }):

  // This works, but is easy for someone to break again
  const searchOptions = useMemo(() => ({
    matchMode: 'whole-word',
    text: text
  }), [text]);

然而，这仍然令人困惑，而且对于某些人来说，通过移除括号来破解它太容易了。

🌐 However, this is still confusing and too easy for someone to break by removing the parentheses.

为了避免这个错误，请明确写出 return 语句：

🌐 To avoid this mistake, write a return statement explicitly:

  // ✅ This works and is explicit
  const searchOptions = useMemo(() => {
    return {
      matchMode: 'whole-word',
      text: text
    };
  }, [text]);

每次我的组件渲染时，useMemo 中的计算都会重新运行

🌐 Every time my component renders, the calculation in useMemo re-runs

确保你已将依赖数组指定为第二个参数！

🌐 Make sure you’ve specified the dependency array as a second argument!

如果你忘记了依赖数组，useMemo 每次都会重新运行计算：

🌐 If you forget the dependency array, useMemo will re-run the calculation every time:

function TodoList({ todos, tab }) {
  // 🔴 Recalculates every time: no dependency array
  const visibleTodos = useMemo(() => filterTodos(todos, tab));
  // ...

这是将依赖数组作为第二个参数传递的更正版本：

🌐 This is the corrected version passing the dependency array as a second argument:

function TodoList({ todos, tab }) {
  // ✅ Does not recalculate unnecessarily
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...

如果这没有帮助，那么问题在于至少有一个依赖与上一次渲染不同。你可以通过手动将依赖记录到控制台来调试这个问题：

🌐 If this doesn’t help, then the problem is that at least one of your dependencies is different from the previous render. You can debug this problem by manually logging your dependencies to the console:

  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  console.log([todos, tab]);

然后，你可以在控制台中对来自不同重新渲染的数组右键点击，并为它们都选择“存储为全局变量”。假设第一个保存为 temp1，第二个保存为 temp2，你就可以使用浏览器控制台检查两个数组中的每个依赖是否相同：

🌐 You can then right-click on the arrays from different re-renders in the console and select “Store as a global variable” for both of them. Assuming the first one got saved as temp1 and the second one got saved as temp2, you can then use the browser console to check whether each dependency in both arrays is the same:

Object.is(temp1[0], temp2[0]); // Is the first dependency the same between the arrays?
Object.is(temp1[1], temp2[1]); // Is the second dependency the same between the arrays?
Object.is(temp1[2], temp2[2]); // ... and so on for every dependency ...

当你发现哪个依赖破坏了记忆化时，要么找到方法去移除它，要么也对它进行记忆化。

🌐 When you find which dependency breaks memoization, either find a way to remove it, or memoize it as well.

我需要在循环中为每个列表项调用 useMemo，但这是不允许的

🌐 I need to call useMemo for each list item in a loop, but it’s not allowed

假设 Chart 组件被 memo 封装。当 ReportList 组件重新渲染时，你想要跳过列表中每个 Chart 的重新渲染。然而，你不能在循环中调用 useMemo：

🌐 Suppose the Chart component is wrapped in memo. You want to skip re-rendering every Chart in the list when the ReportList component re-renders. However, you can’t call useMemo in a loop:

function ReportList({ items }) {
  return (
    <article>
      {items.map(item => {
        // 🔴 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>
  );
}

或者，你可以移除 useMemo，而直接将 Report 封装在 memo. 中。如果 item 属性没有变化，Report 将跳过重新渲染，因此 Chart 也将跳过重新渲染：

🌐 Alternatively, you could remove useMemo and instead wrap Report itself in 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>
  );
});