How to fix 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 in React

What this error means

This error is React's way of enforcing the Rules of Hooks, which are essential for React to maintain component state correctly across renders. Hooks like useState, useEffect, and useContext rely on being called in the exact same order every time a component renders. When React detects a Hook being called outside a function component or custom Hook, or in a place where the call order might change (like inside a loop or condition), it throws this error to prevent unpredictable behavior. The error occurs because React internally uses the order of Hook calls to associate each Hook with its corresponding state. If Hooks are called conditionally or outside function components, React cannot guarantee this order will remain consistent, which would break the state management system and lead to bugs where components don't update correctly or lose their state between renders. Understanding this error is crucial because it represents one of the most fundamental constraints in modern React development. Unlike class components where lifecycle methods could be called anywhere, Hooks have strict placement rules that must be followed to ensure React's rendering system works correctly.

Typical symptoms

• Application crashes immediately when a component renders that calls a Hook improperly
• Error message explicitly states "Hooks can only be called inside of the body of a function component"
• React Developer Tools shows warnings about invalid Hook calls
• Component state behaves unpredictably or doesn't update when expected
• Error occurs after upgrading React versions or adding new dependencies
• Build succeeds but runtime error appears in browser console
• Error happens when calling useState, useEffect, or other Hooks inside event handlers or helper functions

Common causes

1. Calling Hooks inside class components instead of function components
2. Placing Hook calls inside loops, conditional statements, or nested functions
3. Mismatched versions between react and react-dom packages in package.json
4. Multiple copies of React installed in node_modules (common with npm link or monorepo setups)
5. Calling Hooks inside event handlers, callbacks, or regular JavaScript functions
6. Calling React components as regular functions (e.g., MyComponent() instead of <MyComponent />)
7. Attempting to use Hooks in a function that isn't a component or custom Hook (must start with "use" prefix)
8. Breaking Hook rules after a conditional early return in a component

How to fix "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"

function MyComponent() {
  if (condition) {
    const [state, setState] = useState(0); // ❌ Error!
  }
  return <div>Content</div>;
}

function MyComponent() {
  const [state, setState] = useState(0); // ✓ Correct
  
  if (condition) {
    // Use state here
  }
  return <div>Content</div>;
}

function MyComponent() {
  const handleClick = () => {
    const [count, setCount] = useState(0); // ❌ Error!
    setCount(count + 1);
  };
  
  return <button onClick={handleClick}>Click</button>;
}

function MyComponent() {
  const [count, setCount] = useState(0); // ✓ Correct
  
  const handleClick = () => {
    setCount(count + 1);
  };
  
  return <button onClick={handleClick}>Click {count}</button>;
}

npm ls react react-dom

npm install react@latest react-dom@latest

npm install react@18.2.0 react-dom@18.2.0

rm -rf node_modules package-lock.json
npm install

npm ls react

# In your linked package
npm link react react-dom

# In your main project
npm link

{
  "resolutions": {
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

rm -rf node_modules package-lock.json
npm install

class MyComponent extends React.Component {
  render() {
    const [count, setCount] = useState(0); // ❌ Error!
    return <div>{count}</div>;
  }
}

function MyComponent() {
  const [count, setCount] = useState(0); // ✓ Correct
  return <div>{count}</div>;
}

const MyComponent = () => {
  const [count, setCount] = useState(0);
  return <div>{count}</div>;
};

function getWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth); // ❌ Error!
  return width;
}

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth); // ✓ Correct
  
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  
  return width;
}

// Usage in component
function MyComponent() {
  const width = useWindowWidth();
  return <div>Width: {width}</div>;
}

npm install eslint-plugin-react-hooks --save-dev

{
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

Advanced notes

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      react: path.resolve('./node_modules/react'),
      'react-dom': path.resolve('./node_modules/react-dom')
    }
  }
};

Frequently asked questions

What does "Invalid hook call. Hooks can only be called inside of the body of a fu" mean?

This error is React's way of enforcing the Rules of Hooks, which are essential for React to maintain component state correctly across renders. Hooks like useState, useEffect, and useContext rely on being called in the exact same order every time a component renders. When React detects a Hook being called outside a function component or custom Hook, or in a place where the call order might change (like inside a loop or condition), it throws this error to prevent unpredictable behavior.

How do I fix "Invalid hook call. Hooks can only be called inside of the body of a fu"?

This error occurs when React Hooks are called outside the body of a function component or custom Hook, violating one of React's fundamental rules. The error typically happens due to version mismatches, calling Hooks in class components, or placing Hooks inside loops, conditions, or nested functions.

What causes "Invalid hook call. Hooks can only be called inside of the body of a fu"?

Calling Hooks inside class components instead of function components Placing Hook calls inside loops, conditional statements, or nested functions Mismatched versions between react and react-dom packages in package.json

Is the "Invalid hook call. Hooks can only be called inside of the body of a fu" error serious?

Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

Related errors

• Hook returned an unexpected error

  How to fix "Hook returned an unexpected error" in React

  HIGH

• You attempted to use a hook in a class component

  How to fix "You attempted to use a hook in a class component" in React

  HIGH

• React Hook useMemo has a missing dependency. Either include it or remove the dependency array

  Fix the “React Hook useMemo has a missing dependency” warning

  MEDIUM

• Warning: React Hook was called conditionally. React Hooks must be called in the exact same order in every component render.

  React Hook was called conditionally

  MEDIUM

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation
• 📖
  React Docs: Rules of Hooks(Official Docs)
• 📖
  React: Invalid Hook Call Warning(Official Docs)
• 💬
  GitHub Issue: Invalid hook call discussion(Stack Overflow)
• Kinsta: How To Fix React Hooks Error
• DEV Community: Solving React Hooks Invalid Call Warning
• Bobby Hadz: Invalid hook call fix guide