{"record":{"id":"6cb246e150b8ad3d","repo":"facebook/react","slug":"invalid-hook-call-hooks-can-only-be-called-inside-6cb246","errorCode":null,"errorMessage":"Invalid hook call. Hooks can only be called inside of the body of a function component.","messagePattern":"Invalid hook call\\. Hooks can only be called inside of the body of a function component\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-server/src/ReactFizzHooks.js","lineNumber":809,"sourceCode":"    // This is not a server action, so the implementation is much simpler.\n\n    // Bind the state to the first argument of the action.\n    const boundAction = action.bind(null, initialState);\n    // Wrap the action so the return value is void.\n    const dispatch = (payload: P): void => {\n      boundAction(payload);\n    };\n    return [initialState, dispatch, false];\n  }\n}\n\nfunction useId(): string {\n  const task: Task = currentlyRenderingTask as any;\n  const treeId = getTreeId(task.treeContext);\n\n  const resumableState = currentResumableState;\n  if (resumableState === null) {\n    throw new Error(\n      'Invalid hook call. Hooks can only be called inside of the body of a function component.',\n    );\n  }\n\n  const localId = localIdCounter++;\n  return makeId(resumableState, treeId, localId);\n}\n\nfunction use<T>(usable: Usable<T>): T {\n  // $FlowFixMe[invalid-compare]\n  if (usable !== null && typeof usable === 'object') {\n    // $FlowFixMe[method-unbinding]\n    if (typeof usable.then === 'function') {\n      // This is a thenable.\n      const thenable: Thenable<T> = usable as any;\n      return unwrapThenable(thenable);\n    } else if (usable.$$typeof === REACT_RECOVERABLE_TYPE) {\n      // Create the recoverable error here so its stack captures the component","sourceCodeStart":791,"sourceCodeEnd":827,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server/src/ReactFizzHooks.js#L791-L827","documentation":"Fizz's useId reads the per-request ResumableState to build an id. When currentResumableState is null there is no active SSR render pass, so React rejects the call with the generic invalid-hook-call message: the hook ran outside the body of a function component being rendered by this renderer.","triggerScenarios":"Calling React.useId() from a plain function, class, or callback while code executes on the server; invoking the hook after the SSR pass finished; running with two copies of React or a renderer entrypoint that never installs the Fizz render state.","commonSituations":"Broken Rules of Hooks; duplicate react/react-dom installs caused by bundler aliasing or npm linking; version mismatch between react and react-dom; hooks imported from renderer internals instead of the 'react' package.","solutions":["Move the useId call to the top level of a function component and call it unconditionally","Run npm ls react react-dom to find duplicate React copies, then dedupe and align versions","Import hooks from 'react' only and make sure react and react-dom versions match"],"exampleFix":"// before\nconst makeId = () => useId(); // called outside a component render -> throws\nexport function Label() { return <label htmlFor={makeId()} />; }\n\n// after\nexport function Label() {\n  const id = useId(); // top level of the component body\n  return <label htmlFor={id} />;\n}","handlingStrategy":"validation","validationCode":null,"typeGuard":null,"tryCatchPattern":null,"preventionTips":["Enable eslint-plugin-react-hooks and fix every rules-of-hooks violation","Keep exactly one copy of react and react-dom in the bundle (npm ls react react-dom)","Call hooks only at the top level of function components, imported from 'react'"],"tags":["invalid-hook-call","use-id","rules-of-hooks","ssr","duplicate-react"],"backgroundTag":"invalid-hook-call","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}