"Invalid Hook Call" in React

Your React app is crashing with this 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
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

React actually tells you the three possible causes right in the error message. Here's how to figure out which one you're dealing with and fix it.

Cause 1: Breaking the Rules of Hooks (most common)

React hooks (useState, useEffect, useContext, etc.) have strict rules about where they can be called. AI-generated code breaks these rules constantly because AI doesn't always understand the structural constraints.

Hooks inside conditions or loops:

// WRONG — hook inside a condition
function Profile({ user }) {
    if (!user) return null;
    const [name, setName] = useState(user.name); // breaks!
}

// RIGHT — hook before any conditions
function Profile({ user }) {
    const [name, setName] = useState('');
    if (!user) return null;
    // ...
}

Hooks inside regular functions:

// WRONG — hook inside a regular function
function fetchData() {
    const [data, setData] = useState(null); // breaks!
}

// RIGHT — hook inside a React component
function DataDisplay() {
    const [data, setData] = useState(null);
    // ...
}

Hooks inside callbacks:

// WRONG — hook inside a callback
function UserList() {
    const handleClick = () => {
        const [selected, setSelected] = useState(null); // breaks!
    };
}

// RIGHT — hook at the top level of the component
function UserList() {
    const [selected, setSelected] = useState(null);
    const handleClick = () => {
        setSelected(something);
    };
}

The rule is simple: hooks must be called at the top level of a function component or a custom hook. Not inside if statements, loops, callbacks, or regular functions.

Cause 2: Calling a hook outside a component

AI sometimes generates utility functions that use hooks. This doesn't work — hooks only work inside React components (functions that return JSX) or custom hooks (functions whose name starts with use).

// WRONG — regular function using a hook
function getWindowSize() {
    const [size, setSize] = useState({ width: 0, height: 0 });
    // ...
}

// RIGHT — custom hook (name starts with "use")
function useWindowSize() {
    const [size, setSize] = useState({ width: 0, height: 0 });
    // ...
}

The use prefix isn't just a convention — React uses it to identify hook-compatible functions. Rename the function to start with use and it becomes a custom hook that can use other hooks.

Cause 3: Multiple copies of React

This is sneaky. If your project has two different copies of React installed (common with monorepos, linked packages, or incorrect npm installs), hooks will break because they track state per React instance.

Check for duplicates:

# Check how many copies of React exist
npm ls react

# You should see one version. If you see two, that's the problem.
# Something like:
# ├── [email protected]
# └─┬ some-package
#   └── [email protected]   <-- duplicate!

Fix:

# Remove duplicates and reinstall
rm -rf node_modules package-lock.json
npm install

# If a dependency bundles its own React, you may need to add
# a resolution in package.json:
"overrides": {
    "react": "18.2.0"
}

Cause 4: Mismatching React and ReactDOM versions

If react and react-dom are on different major versions, hooks won't work.

# Check versions
npm ls react react-dom

# Both should be the same major version
# [email protected] + [email protected] = good
# [email protected] + [email protected] = bad

Fix: Install matching versions: npm install react@18 react-dom@18

Why AI causes this

AI understands what hooks do but doesn't always respect the structural rules. It generates code that calls useState after an early return, puts useEffect inside a condition, or creates utility functions that use hooks without the use prefix. These are all patterns that look reasonable if you don't know React's rules, but break immediately at runtime.

The fix is almost always structural: move the hook to the top level of the component, before any conditions or returns. If AI put a hook somewhere it can't go, you need to reorganize the component so the hook is always called, in the same order, every time the component renders.