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

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 [email protected] [email protected]

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"
  }
}