React Invalid Hook Call Error

Always call hooks at the top level of your function component, never inside conditions or loops.

function MyComponent() {
  // ✅ Top level
  const [count, setCount] = useState(0)
  const [user, setUser] = useState(null)
  
  // ❌ Inside condition
  if (count > 0) {
    useEffect(() => {}) // DON'T
  }
  
  // ❌ Inside loop
  for (let i = 0; i < 5; i++) {
    useEffect(() => {}) // DON'T
  }
  
  // ✅ Move condition/loop logic inside the hook
  useEffect(() => {
    if (count > 0) {
      // conditional logic here
    }
  }, [count])
}

Multiple React versions can cause hooks to fail. Check your node_modules.

# Check for duplicate React
npm ls react

# Deduplicate if needed
npm dedupe

# Or check package.json for mismatched versions
# All React-related packages should use the same version

Function components and class components use different state patterns.

// ✅ Function component with hooks
function MyComponent() {
  const [state, setState] = useState(0)
  useEffect(() => { document.title = String(state) }, [state])
  return <div>{state}</div>
}

// ❌ Cannot use hooks in class components
class MyComponent extends React.Component {
  const [state, setState] = useState(0) // WRONG
}