[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]); // ... } ```