# Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app.

- **ID:** `react/invalid-hook-call-inside-callback`
- **Domain:** react
- **Category:** runtime_error
- **Verification:** ai_generated
- **Fix Rate:** 93%

## Root Cause

Hooks are called outside the top-level of a function component, e.g., inside a callback, conditionally, or in a class component. Also occurs when multiple React copies are bundled.

## Version Compatibility

| Version | Status | Introduced | Deprecated |
|---------|--------|------------|------------|
| React 16.8+ | active | — | — |
| React 17.x | active | — | — |
| React 18.x | active | — | — |

## Workarounds

1. **Ensure all hooks are called at the top level of a function component, not inside loops, conditions, or nested functions. Example: function MyComponent() { const [state, setState] = useState(0); // correct }** (95% success)
   ```
   Ensure all hooks are called at the top level of a function component, not inside loops, conditions, or nested functions. Example: function MyComponent() { const [state, setState] = useState(0); // correct }
   ```
2. **Check for duplicate React versions by running npm ls react or yarn why react. If duplicates exist, deduplicate with npm dedupe or use resolutions in package.json.** (90% success)
   ```
   Check for duplicate React versions by running npm ls react or yarn why react. If duplicates exist, deduplicate with npm dedupe or use resolutions in package.json.
   ```
3. **If using a class component, refactor to a function component with hooks, or keep using class lifecycle methods instead of hooks.** (85% success)
   ```
   If using a class component, refactor to a function component with hooks, or keep using class lifecycle methods instead of hooks.
   ```

## Dead Ends

- **** — Hooks must be called synchronously during render; async callbacks break the rules of hooks. (95% fail)
- **** — Hooks must be called unconditionally at the top level; conditional calls change the call order between renders. (90% fail)
- **** — Multiple React copies cause the hook reference to mismatch between packages. (80% fail)