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

What causes this error

Hooks rely on React tracking call order within a specific render — they only work when called directly inside a function component's body or another custom hook (whose name starts with `use`). Calling one inside a regular helper function, inside a class component, inside a loop/condition, or from a second, duplicate copy of React in node_modules breaks that tracking.

The Fix

// Wrong — hook called inside a plain helper function
function getUserData() {
  const [data, setData] = useState(null); // invalid — not a component or hook
  return data;
}

// Fix — rename it to start with `use` so it's recognized as a custom hook,
// and only call it from a component or another hook
function useUserData() {
  const [data, setData] = useState(null);
  return data;
}

If the call site genuinely looks correct, check for duplicate React installs: npm ls react should show exactly one version. A monorepo or a locally linked package is a common source of a second copy.

Common causes / variations

• Calling a hook from a regular function that isn't itself a component or a `use`-prefixed hook
• Two versions of React resolving in the dependency tree (common with `npm link` or workspaces)
• Calling a hook conditionally or inside a loop, changing its call order between renders

Related errors

See also: React Hook "useState" is called conditionally, Too many re-renders.