React Error: Invalid Hook Call — What It Means & How to Fix It

What Does This Error Mean?

This error means you called a React hook (like useState, useEffect, or useContext) in a place where hooks are not allowed. React has strict rules about where hooks can be used — they can only be called at the top level of a function component or inside another custom hook. Using them in regular functions, class components, event handlers, loops, or if statements breaks these rules.

Affected Models

React 16.8 and later
All React hook-based code

Common Causes

Calling a hook inside a regular JavaScript function instead of a React function component
Calling a hook inside a class component — hooks only work in function components
Calling a hook conditionally (inside an if statement) or inside a loop
Having two different copies of React loaded — can happen with npm link or certain project setups
Calling a hook from an event handler function defined inside the component but not at the top level

How to Fix It

Move all hook calls to the very top of your React function component, before any if statements, loops, or early returns.

Every hook call must run in the same order every time the component renders. Putting them inside conditionals breaks this rule.
If you are using a class component, convert it to a function component, or use a higher-order component to inject the hook's value as a prop.

Hooks cannot be used inside class components — this is a fundamental limitation, not a bug.
Check your package.json for duplicate React versions. Run: npm ls react in your project folder. You should only see one version of React.

If you see multiple versions, check if any npm-linked packages include their own copy of React. Deduplicate using package.json overrides or resolutions.
If you need hook behavior inside an event handler, call the hook at the component's top level and use the returned value or function inside the event handler.

Example: const [count, setCount] = useState(0); — then use setCount inside onClick, not useState.
Make sure you are not accidentally calling a hook from a utility function that is not itself a hook (custom hooks must start with 'use'). Move the hook call into the component itself.

Custom hooks must start with 'use' (like useMyHook) and follow the same rules as built-in hooks.

When to Call a Professional

Invalid hook call errors are always fixable yourself. Read the Rules of Hooks documentation from React. The most common fix is moving the hook call to the top level of the component function.

Frequently Asked Questions

Why does React have such strict rules about hooks?

React relies on the ORDER of hook calls being consistent between renders. If a hook is inside an if statement, it might run on one render but not the next. React uses the order to match each hook call to its stored state. If the order changes, React reads the wrong state for the wrong hook, causing unpredictable bugs.

Can I use hooks inside a callback function passed to useEffect?

No — you cannot call hooks inside the callback function passed to useEffect. You can only call hooks at the top level of your component. Inside useEffect's callback, you use the values already captured from your hooks — not new hook calls.

How do I know if I have two copies of React?

Run npm ls react in your terminal. If you see react listed more than once at different paths, you have duplicates. This commonly happens when a library you installed has its own React dependency that does not match yours. Fix it by using peerDependencies correctly or using npm overrides.