{"record":{"id":"c02c1d7debfc8184","repo":"facebook/react","slug":"invalid-hook-call-hooks-can-only-be-called-inside","errorCode":null,"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-server/src/ReactFizzHooks.js","lineNumber":172,"sourceCode":"    (fatalRecoverableError as any).stack = undefined;\n  }\n  return fatalRecoverableError;\n}\n\n// Lazily created map of render-phase updates\nlet renderPhaseUpdates: Map<UpdateQueue<any>, Update<any>> | null = null;\n// Counter to prevent infinite loops.\nlet numberOfReRenders: number = 0;\nconst RE_RENDER_LIMIT = 25;\n\nlet isInHookUserCodeInDev = false;\n\n// In DEV, this is the name of the currently executing primitive hook\nlet currentHookNameInDev: ?string;\n\nfunction resolveCurrentlyRenderingComponent(): Object {\n  if (currentlyRenderingComponent === null) {\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\n  if (__DEV__) {\n    if (isInHookUserCodeInDev) {\n      console.error(\n        'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ' +\n          'You can only call Hooks at the top level of your React function. ' +\n          'For more information, see ' +\n          'https://react.dev/link/rules-of-hooks',\n      );\n    }","sourceCodeStart":154,"sourceCodeEnd":190,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server/src/ReactFizzHooks.js#L154-L190","documentation":"The classic invalid-hook-call error, thrown by the Fizz SSR renderer's resolveCurrentlyRenderingComponent when a hook runs while no component is currently rendering (currentlyRenderingComponent === null). On the server this means the hook executed outside a function component's render pass, or — very commonly — multiple copies of React exist so the hook and the renderer use different dispatcher state.","triggerScenarios":"Calling useState/useEffect/useMemo or a custom hook from module scope, a plain helper function, a class component, or a callback during server rendering. Rendering with react-dom/server from a different copy than the react package providing hooks (nested node_modules, duplicated installs, a library bundling its own React).","commonSituations":"Duplicate React installs from npm hoisting issues or monorepos; libraries listing react as a dependency instead of a peerDependency; mixing a CDN/bundled React with an installed one; react-dom version out of sync with react after an upgrade.","solutions":["Run npm ls react (or yarn why react / pnpm why react) and deduplicate to exactly one copy; use resolutions/overrides if needed","Ensure react and react-dom are the same version and both come from the same install graph","Move hooks into function components, called unconditionally at the top level","Check that libraries you render treat react as an external/peer dependency rather than bundling it"],"exampleFix":"// before: hook called at module scope, SSR hits it with no component rendering\nconst theme = useTheme();\nexport default function Page() { return <div>{theme}</div>; }\n\n// after\nexport default function Page() {\n  const theme = useTheme(); // inside the component render\n  return <div>{theme}</div>;\n}\n\n// package.json — force a single copy if nesting caused duplicates\n\"resolutions\": { \"react\": \"19.0.0\", \"react-dom\": \"19.0.0\" }","handlingStrategy":"try-catch","validationCode":"# CI check: fail when more than one react copy exists\nnpm ls react --parseable 2>/dev/null | sort -u | wc -l | grep -q '^1$' || (echo 'duplicate react copies' && exit 1)","typeGuard":null,"tryCatchPattern":"const {pipe} = renderToPipeableStream(<App/>, {\n  onError(err) {\n    if (String(err.message).includes('Invalid hook call')) {\n      // Log component stack; check for duplicate React copies and out-of-render hook calls.\n      logError(err); // render continues for other boundaries\n    }\n  },\n});","preventionTips":["Run npm ls react in CI and fail on duplicate copies; use resolutions/overrides when needed","Keep react and react-dom at exactly matching versions from a single install","Only call hooks unconditionally at the top level of function components","Verify rendered libraries list react as a peerDependency, not a bundled dependency"],"tags":["hooks","invalid-hook-call","ssr","duplicate-react","version-mismatch"],"backgroundTag":"invalid-hook-call","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}