# Error: Invalid hook call. Hooks can only be called inside 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/error-invalid-call-of-useeffect-in-callback`
- **Domain:** react
- **Category:** runtime_error
- **Verification:** ai_generated
- **Fix Rate:** 90%

## Root Cause

A hook (e.g., useEffect, useState) is being called inside a regular JavaScript function, callback, or class component, violating the Rules of Hooks that require hooks to be called at the top level of a React function component.

## Version Compatibility

| Version | Status | Introduced | Deprecated |
|---------|--------|------------|------------|
| React 18.2.0 | active | — | — |
| React 17.0.2 | active | — | — |
| React 16.14.0 | active | — | — |

## Workarounds

1. **Ensure all hook calls are at the top level of a function component, never inside loops, conditions, or nested functions. Example: function MyComponent() { useEffect(() => { /* ... */ }, []); return <div />; }** (90% success)
   ```
   Ensure all hook calls are at the top level of a function component, never inside loops, conditions, or nested functions. Example: function MyComponent() { useEffect(() => { /* ... */ }, []); return <div />; }
   ```
2. **Check for duplicate React instances in your bundle by running `npm ls react` and ensure only one version exists. If using webpack, add `resolve: { alias: { react: require.resolve('react') } }` to webpack config.** (85% success)
   ```
   Check for duplicate React instances in your bundle by running `npm ls react` and ensure only one version exists. If using webpack, add `resolve: { alias: { react: require.resolve('react') } }` to webpack config.
   ```
3. **Convert class components to function components if you need to use hooks. Example: class MyComp extends Component { render() { return <div />; } } becomes function MyComp() { return <div />; }** (95% success)
   ```
   Convert class components to function components if you need to use hooks. Example: class MyComp extends Component { render() { return <div />; } } becomes function MyComp() { return <div />; }
   ```

## Dead Ends

- **Move the hook call to the top of a class component's render method** — Hooks are not supported in class components; they must be used in function components. (100% fail)
- **Wrap the hook call in a try-catch block** — The error is thrown as an invariant, not a catchable exception, and try-catch doesn't prevent the violation. (95% fail)
- **Use React.forwardRef to pass hooks to child components** — forwardRef doesn't change where hooks can be called; hooks still must be in the component body. (90% fail)