Invalid hook call. Hooks can only be called inside of the body of a function component.

Educational use only. Content explains errors and defensive fixes for systems you own or are authorised to test. Do not use any technique here to access data, accounts, or networks without permission.

Root Cause

React enforces strict rules on where Hooks (`useState`, `useEffect`, etc.) can be called. This error is triggered if you call a Hook in a regular JavaScript function (not a component or custom hook), inside a class component, conditionally inside an `if` statement, or inside a loop. Another very common but hidden cause is having multiple versions of React loaded in the same project (e.g., due to a poorly configured monorepo or a third-party library bundling its own copy of React), which breaks the internal context that Hooks rely on.

Fix / Solution

First, verify that all hooks are called at the top level of a functional React component. Do not nest them in loops or conditions. If the code structure is correct, run `npm ls react` to check for multiple versions of React in your dependency tree. Use tools like `npm dedupe` or Webpack aliases to resolve multiple React instances so that only one version is used across the application.

Code Snippet

// ❌ Invalid: Hook inside a regular function
function calculate() { const [val, setVal] = useState(0); }

// ❌ Invalid: Hook inside a condition
if (condition) { useEffect(() => {}); }

// ✅ Valid: Top level of a component
function MyComponent() {
  const [val, setVal] = useState(0);
  useEffect(() => {
    if (condition) { /* do something */ }
  }, [condition]);
  return <div>{val}</div>;
}