---
url: /docs/guide/usage/linter/rules/react/preserve-manual-memoization.md
---

### What it does

Validates that existing manual memoization (`useMemo`, `useCallback`,
`React.memo`) is preserved by the React Compiler: the compiler only
compiles code whose inferred dependencies match or exceed the manually
specified ones.

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

### Why is this bad?

When the compiler cannot prove that existing manual memoization is
preserved, it skips optimizing that code.

### Examples

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

```jsx
import { useCallback } from "react";
function useFoo(props) {
  const values = [];
  values.push(props);
  return useCallback(() => values, [values]);
}
```

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

```jsx
import { useMemo } from "react";
function Component({ propA }) {
  return useMemo(() => propA.x, [propA]);
}
```

## How to use

## Version

This rule was added in v1.79.0.

## References