Invalid hook call — What It Means and How to Fix It

"Invalid hook call" is a runtime error in React that means a hook was used outside a valid React component or render context. It appears in the browser console with a red stack trace, and it stops your component tree from rendering.

What "Invalid hook call" Means

React hooks like useState, useEffect, and useContext must be called from the top level of a function component, a custom hook, or a React render phase. When React detects a hook call in the wrong place—like a plain function, a callback, or a class component—it throws this error to prevent unpredictable state and lifecycle behavior.

Why It Happens

The most common causes are:

• Calling hooks inside event handlers or callbacks — e.g., inside onClick, setTimeout, or .then().
• Calling hooks from regular JavaScript functions — not a component or custom hook.
• Duplicate React copies — two versions of React loaded (e.g., from npm dedupe issues or a bad import), causing the hook dispatcher to mismatch.

Example Code That Triggers It

Here's a minimal, runnable example in a browser (React 18, TypeScript):

import { useState } from "react";

function handleClick() {
  // ❌ Invalid hook call — this function is not a component
  const [count, setCount] = useState(0);
  setCount(count + 1);
}

export function App() {
  return <button onClick={handleClick}>Click me</button>;
}

When you click the button, React throws: Invalid hook call. Hooks can only be called inside of the body of a function component.

How to Fix It

Move the hook to the top level of the component, and use the event handler only to update state:

import { useState } from "react";

export function App() {
  const [count, setCount] = useState(0); // ✅ valid — top level of component

  function handleClick() {
    setCount(count + 1); // ✅ valid — just calls the setter
  }

  return <button onClick={handleClick}>Count: {count}</button>;
}

The fix works because useState is now called during React's render phase, where the hook dispatcher is active. The event handler only invokes the state setter, which React provides.

Common Mistakes That Cause This

1. Calling hooks inside a conditional or loop — even inside a component, hooks must run unconditionally. A if (isLoading) { useState(...) } will trigger this error on re-renders when the condition flips.
2. Writing a custom hook without the use prefix — e.g., function fetchData() { useState(...) }. React treats it as a regular function, not a hook, so the call is invalid.

When Should You Worry About This?

You should worry when the error appears in a production build or after a dependency update. In development, it's usually a code mistake you can fix in seconds. In production, it often points to a duplicate React copy—check your package.json for multiple React versions, or run npm ls react to verify. If you're using Next.js, ensure you're not importing React from two different paths (e.g., react and react/index.js).

Next time this error appears, check the stack trace's first line—it names the exact function where the invalid hook call happened. Fix that function first, and the rest usually resolves.