React errorReact: “Invalid hook call. Hooks can only be called inside of the body of a function component”

Why React rejects the Hook call, and the fix

1. 01

   A Hook is called outside the top level of a component

   “Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns.” React, Invalid Hook Call Warning

   Hooks only work while React renders a function component or a custom Hook. A useState or useContext inside an if, a loop, an onClick handler, after an early return, inside a class component, or inside a function you pass to useEffect, useMemo or useReducer breaks that rule. Move the call to the top of the component, above any early return or condition, and put the condition after the Hook call or inside the effect.

   // breaks: Hook after an early return
   function Profile({ user }) {
     if (!user) return null;
     const theme = useContext(ThemeContext);
   }
   
   // works: Hook first, condition after
   function Profile({ user }) {
     const theme = useContext(ThemeContext);
     if (!user) return null;
   }

2. 02

   react and react-dom don’t match

   “You might have mismatching versions of React and React DOM.” React, Invalid Hook Call Warning

   react and react-dom (or react-native, or react-test-renderer in tests) must be the same version. Run npm ls react react-dom, then install matching versions of both together.

   npm ls react react-dom
   npm install react@latest react-dom@latest

3. 03

   Two copies of React in the app

   “For example, maybe a library you’re using incorrectly specifies react as a dependency (rather than a peer dependency).” React, Invalid Hook Call Warning

   If npm ls react shows more than one copy, often a library lists react as a dependency instead of a peer dependency. Update or replace that library, or force one React with an override in package.json (npm overrides with "$react" need react and react-dom in your own dependencies; Yarn uses resolutions, pnpm uses pnpm.overrides). Then run npm dedupe, delete node_modules and reinstall. For a library linked with npm link, React’s fix is to run npm link ../your-app/node_modules/react from the library folder, so it uses the app’s copy.

   {
     "overrides": {
       "react": "$react",
       "react-dom": "$react-dom"
     }
   }

4. 04

   Catch it before it ships

   “You can use the eslint-plugin-react-hooks plugin to catch these mistakes.” React, Invalid Hook Call Warning

   The React Hooks ESLint plugin flags a Hook in the wrong place as you type. Turn it on in your linter, so AI-generated or copied code that calls a Hook inside a condition is caught in the editor instead of in production.

Checked against the vendor’s docs on November 7, 2026: React: Invalid Hook Call Warning (the three causes and how to check them).

Rather hand it over?

Fixed scope, fixed price, paid upfront. The work happens in writing; no call needed.

• from $450App Fix TicketOne reproducible bug in an existing mobile or web app, diagnosed and fixed.See scope and start
• from $450AI-Built App RescueA Lovable, Bolt or Cursor app checked end to end in 3 days, then its worst problems fixed at a fixed price.No issues worth fixing, no charge. If the Launch Check finds nothing rated medium or higher, Simon refunds the full $450. You keep the report either way. This applies to the first 10 Launch Checks bought after October 30, 2026.See scope and start

Related: React “Too many re-renders” · Next.js hydration error · React “Each child in a list should have a unique key”