---
url: /docs/guide/usage/linter/rules/react/use-memo.md
---

### 功能

验证 `useMemo()` hook 的使用是否存在常见错误，例如传入异步或生成器回调，或错误使用其参数。

由 React Compiler 提供支持，它每个文件运行一次，并与其他 React Compiler 规则共享。移植自 [`react-hooks/use-memo`](https://react.dev/reference/eslint-plugin-react-hooks/lints/use-memo)。

### 为什么这是不好的？

异步或生成器回调会使 `useMemo` 记忆化一个 promise 或迭代器，而不是预期的值；错误使用参数则会导致记忆化功能完全无法工作。

### 示例

此规则的**错误**代码示例：

```jsx
import { useMemo } from "react";
function Component({ a }) {
  const x = useMemo(async () => {
    await a;
  }, [a]);
  return <div>{x}</div>;
}
```

此规则的**正确**代码示例：

```jsx
import { useMemo } from "react";
function Component({ a }) {
  const x = useMemo(() => a + 1, [a]);
  return <div>{x}</div>;
}
```

## 如何使用

## 版本

此规则在 v1.79.0 中添加。

## 参考