← Back to rules

react/use-memo Correctness

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.

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:

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:

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

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/use-memo": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/use-memo": "error",
  },
});

CLI

oxlint --deny react/use-memo --react-plugin

Version

This rule was added in vnext.

References

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