← Back to rules

react/preserve-manual-memoization Correctness

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.

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:

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

Examples of correct code for this rule:

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

How to use

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/preserve-manual-memoization": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/preserve-manual-memoization": "error",
  },
});

CLI

oxlint --deny react/preserve-manual-memoization --react-plugin

Version

This rule was added in vnext.

References

• Rule Source
• Upstream rule docs
• Open rule in Oxc Playground