{"record":{"id":"99c534794b2405cc","repo":"facebook/react","slug":"321","errorCode":"321","errorMessage":"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:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.","messagePattern":"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:\n1\\. You might have mismatching versions of React and the renderer \\(such as React DOM\\)\n2\\. You might be breaking the Rules of Hooks\n3\\. You might have more than one copy of React in the same app\nSee https://react\\.dev/link/invalid-hook-call for tips about how to debug and fix this problem\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-reconciler/src/ReactFiberHooks.js","lineNumber":446,"sourceCode":"      const componentName = getComponentNameFromFiber(currentlyRenderingFiber);\n      if (!didWarnAboutAsyncClientComponent.has(componentName)) {\n        didWarnAboutAsyncClientComponent.add(componentName);\n        console.error(\n          '%s is an async Client Component. ' +\n            'Only Server Components can be async at the moment. This error is often caused by accidentally ' +\n            \"adding `'use client'` to a module that was originally written \" +\n            'for the server.',\n          componentName === null\n            ? 'An unknown Component'\n            : `<${componentName}>`,\n        );\n      }\n    }\n  }\n}\n\nfunction throwInvalidHookError() {\n  throw new Error(\n    'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +\n      ' one of the following reasons:\\n' +\n      '1. You might have mismatching versions of React and the renderer (such as React DOM)\\n' +\n      '2. You might be breaking the Rules of Hooks\\n' +\n      '3. You might have more than one copy of React in the same app\\n' +\n      'See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.',\n  );\n}\n\nfunction areHookInputsEqual(\n  nextDeps: Array<mixed>,\n  prevDeps: Array<mixed> | null,\n): boolean {\n  if (__DEV__) {\n    if (ignorePreviousDependencies) {\n      // Only true when this component is being hot reloaded.\n      return false;\n    }","sourceCodeStart":428,"sourceCodeEnd":464,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-reconciler/src/ReactFiberHooks.js#L428-L464","documentation":"The classic 'Invalid hook call': hooks only work while React is rendering a function component, and the reconciler enforces it by swapping in a dispatcher (ContextOnlyDispatcher) whose hook methods throw. The error message itself lists the three root causes it almost always is: mismatched React/renderer versions, breaking the Rules of Hooks, or multiple React copies in one bundle.","triggerScenarios":"Calling useState/useEffect/... from a class component, a plain function, an event handler body, or outside render entirely; or the hook runs in a component rendered by a different React copy than the one whose hook function you imported (npm dedupe failures, symlinked monorepos, bundler aliasing).","commonSituations":"Mismatched react/react-dom versions after partial upgrades; two react copies via transitive deps or duplicated peer dependencies in Yarn/pnpm workspaces; calling a custom hook from a non-component function; hooks behind early returns or inside conditions.","solutions":["Run `npm ls react react-dom` (or pnpm why react) and eliminate duplicate copies; add bundler/alias resolution so only one react resolves.","Align react and react-dom to the exact same version (never mix major/minor).","Audit the stack trace: ensure every hook call is at the top level of a function component or custom hook — never in conditions, loops, class methods, callbacks, or module scope.","Install/enable eslint-plugin-react-hooks to catch Rules-of-Hooks violations statically."],"exampleFix":"// before: hook outside a component render\nconst [count, setCount] = useState(0); // module scope or plain function\n\n// after: hook inside a function component\nfunction Counter() {\n  const [count, setCount] = useState(0);\n  return <button onClick={() => setCount(count + 1)}>{count}</button>;\n}","handlingStrategy":"validation","validationCode":"// Boot-time duplicate/copy check: every React global must agree\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nif (React.version !== ReactDOM.version) {\n  throw new Error(`react ${React.version} / react-dom ${ReactDOM.version} mismatch`);\n}\n// plus CI: `npm ls react react-dom` must resolve to exactly one version each","typeGuard":"// Narrow values before calling hook-like helpers: only call hooks inside component render\nfunction isFunctionComponentInProgress() {\n  // public approximation: hooks must run during render — enforce via eslint rule instead of runtime\n  return false;\n}","tryCatchPattern":"// Not for swallowing — for diagnosis: capture stack, check for duplicate react in node_modules\nwindow.addEventListener('error', e => {\n  if (/Invalid hook call/.test(e.message)) console.error(e.error.stack, React.version);\n});","preventionTips":["npm ls react react-dom in CI; fail on more than one resolved version","Alias react/react-dom to a single copy in bundler config","Enable eslint-plugin-react-hooks (rules-of-hooks as error)","Only call hooks at the top level of function components/custom hooks"],"tags":["hooks","rules-of-hooks","version-mismatch","duplicate-packages"],"backgroundTag":"invalid-hook-call","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}