react/void-use-memo Correctness
What it does
Validates that useMemo() callbacks return a value and that the memoized result is actually used by the component or hook.
Powered by the React Compiler, which runs once per file and is shared with the other React Compiler rules. Port of react-hooks/void-use-memo.
Why is this bad?
A useMemo callback that returns nothing, or whose result is never used, is not memoizing anything — it is usually a side effect in disguise, which belongs in an event handler or effect instead.
Examples
Examples of incorrect code for this rule:
jsx
import { useMemo } from "react";
function Component({ a }) {
useMemo(() => {
console.log(a); // returns nothing, result unused
}, [a]);
return <div>{a}</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
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["react"],
"rules": {
"react/void-use-memo": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/void-use-memo": "error",
},
});bash
oxlint --deny react/void-use-memo --react-pluginVersion
This rule was added in vnext.