react/hooks Suspicious
What it does
Runs the React Compiler's Rules of Hooks validation: hooks must be called unconditionally, in a consistent order, at the top level of a component or hook, and not be used as first-class values.
Powered by the React Compiler, which runs once per file and is shared with the other React Compiler rules. Port of react-hooks/hooks.
This rule overlaps with react/rules-of-hooks; upstream ships it disabled for that reason.
Why is this bad?
React tracks hook state by call order. A hook that is called conditionally or in a different order between renders breaks the association between each hook call and its state, corrupting component state.
Examples
Examples of incorrect code for this rule:
function Component(props) {
if (props.cond) {
useState(0); // hooks may not be called conditionally
}
return <div>{props.text}</div>;
}Examples of correct code for this rule:
function Component(props) {
const [state, setState] = useState(0);
return <div onClick={() => setState(state + 1)}>{props.text}</div>;
}How to use
To enable this rule using the config file or in the CLI, you can use:
{
"plugins": ["react"],
"rules": {
"react/hooks": "error"
}
}import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/hooks": "error",
},
});oxlint --deny react/hooks --react-pluginVersion
This rule was added in vnext.