Fix 'Invalid hook call. Hooks can only be called inside the body of a function component'

The invalid hook call error has three completely different causes that all surface as the same message. Work through them in order and you will find yours.

Cause 1: Breaking the Rules of Hooks

Hooks must be called at the top level of a function component or a custom hook — never inside conditions, loops, event handlers, or regular functions.

// ❌ Hook inside a condition
function Component({ show }) {
  if (show) {
    const [open, setOpen] = useState(false);
  }
}

// ✅ Top level, condition inside
function Component({ show }) {
  const [open, setOpen] = useState(false);
  if (!show) return null;
}

Cause 2: Two Copies of React (Most Common)

If you npm link a component library, or a dependency bundles its own React, your app ends up with two React instances and hooks break. Diagnose and fix it:

# See if React appears more than once
npm ls react

# Common fix: dedupe the tree
npm dedupe

# For local-linked libraries, point them at the host app's React
# in the library's package.json:
#   "peerDependencies": { "react": "^19.0.0" }

Cause 3: Mismatched react and react-dom Versions

react and react-dom must be on the same major/minor version. Align them:

npm install react@latest react-dom@latest