[TOC] ## useMemo **场景** * 你在`useMemo`中进行的计算明显很慢，而且它的依赖关系很少改变。 * 将计算结果作为 props 传递给包裹在[`memo`](https://zh-hans.react.dev/reference/react/memo)中的组件。当计算结果没有改变时，你会想跳过重新渲染。记忆化让组件仅在依赖项不同时才重新渲染。 * 你传递的值稍后用作某些 Hook 的依赖项。例如，也许另一个`useMemo`计算值依赖它，或者[`useEffect`](https://zh-hans.react.dev/reference/react/useEffect)依赖这个值。 ## 示例 ### 缓存费时的结果 ``` import { useMemo, useState } from 'react'; function TodoList({ todos, filter }) { const [newTodo, setNewTodo] = useState(''); const visibleTodos = useMemo(() => { // 除非 todos 或 filter 发生变化，否则不会重新执行 return getFilteredTodos(todos, filter); }, [todos, filter]); // ... } ```