---
title: "react-hooks/use-memo"
description: "Require `useMemo()` callbacks to take no parameters, be synchronous, and not reassign outer variables"
# Generated by src/codegen/lint-rule-docs.ts. Do not edit below this line.
plugin: "react"
aliases: ["react_hooks/use-memo","react/use-memo"]
kind: "problem"
category: "correctness"
default: "off"
fixable: "no"
typeAware: false
deprecated: false
---

React calls the function you pass to `useMemo()` with no arguments, keeps what it returns, and skips the call while the dependencies stay the same. Three kinds of callback don't fit that:

- A callback with parameters. They're always `undefined`.
- An `async` or generator function. The cached value is a promise or an iterator, not the result.
- A callback that assigns to a variable declared outside of it. The assignment doesn't happen on a render where React reuses the cached value.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"react-hooks/use-memo" = "error" # or "warn"
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad */}
```jsx
import { useMemo } from "react";

function Report({ id }) {
  const rows = useMemo(async () => {
    return await loadRows(id);
  }, [id]);
  return <Table rows={rows} />;
}
```

{/* bad */}
```jsx
import { useMemo } from "react";

function Report({ rows }) {
  const sorted = useMemo(list => list.toSorted(), [rows]);
  return <Table rows={sorted} />;
}
```

{/* bad */}
```jsx
import { useMemo } from "react";

function Report({ rows }) {
  let total = 0;
  const visible = useMemo(() => {
    total = rows.length;
    return rows.filter(row => !row.hidden);
  }, [rows]);
  return <Table rows={visible} total={total} />;
}
```

Not reported:

{/* good */}
```jsx
import { useMemo } from "react";

function Report({ rows }) {
  const sorted = useMemo(() => rows.toSorted(), [rows]);
  const total = rows.length;
  return <Table rows={sorted} total={total} />;
}
```