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

### What it does

Validates usage of the `useMemo()` hook against common mistakes, such
as passing an async or generator callback or misusing its arguments.

Powered by the React Compiler, which runs once per file and is shared
with the other React Compiler rules. Port of
[`react-hooks/use-memo`](https://react.dev/reference/eslint-plugin-react-hooks/lints/use-memo).

### Why is this bad?

An async or generator callback makes `useMemo` memoize a promise or
iterator instead of the intended value, and misused arguments prevent
memoization from working at all.

### Examples

Examples of **incorrect** code for this rule:

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

Examples of **correct** code for this rule:

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

## How to use

## Version

This rule was added in v1.79.0.

## References