react-hooks-js/hooks

Validates the rules of hooks

• Category: React Compiler
• Severity: error
• Source: eslint-plugin-react-hooks
• Framework: global
• Enabled when: eslint-plugin-react-hooks v6+ installed AND React Compiler detected in project
• Documentation: https://react.dev/reference/eslint-plugin-react-hooks

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Fires when a hook (useState, useEffect, useMemo, etc. — anything whose name matches use + UppercaseLetter) is called conditionally, inside a loop, after an early return, inside a callback/event handler, in an async function, in a class method, or at module top level. False positive: the use() hook IS allowed in conditionals and loops — it is the only hook with that exemption (and still cannot live in try/catch).

Fix prompt

Use this once validation confirms the diagnostic is real.

Pull the hook to the top level of the component or custom hook, then move the condition inside the hook body: useEffect(() => { if (cond) doThing(); }, [cond]) rather than if (cond) useEffect(...). For conditional initial state, pass the conditional into useState's argument: useState(cond ? a : b). React relies on a fixed call order across renders to associate state with each hook slot. See https://react.dev/reference/eslint-plugin-react-hooks

Related rules

More React Compiler rules from the rules reference:

• react-hooks-js/immutability: Validates against mutating props, state, and other values that [are immutable](https://react.dev/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable)
• react-hooks-js/incompatible-library: Validates against usage of libraries which are incompatible with memoization (manual or automatic)
• react-hooks-js/preserve-manual-memoization: Validates that existing manual memoized is preserved by the compiler. React Compiler will only compile components and hooks if its inference [matches or exceeds the existing manual memoization](https://react.dev/learn/react-compiler/introduction#what-should-i-do-about-usememo-usecallback-and-reactmemo)
• react-hooks-js/purity: Validates that [components/hooks are pure](https://react.dev/reference/rules/components-and-hooks-must-be-pure) by checking that they do not call known-impure functions
• react-hooks-js/refs: Validates correct usage of refs, not reading/writing during render. See the "pitfalls" section in [`useRef()` usage](https://react.dev/reference/react/useRef#usage)