{"record":{"id":"ec1105f4ce4ca675","repo":"facebook/react","slug":"433","errorCode":"433","errorMessage":"useId can only be used while React is rendering","messagePattern":"useId can only be used while React is rendering","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-server/src/ReactFlightHooks.js","lineNumber":122,"sourceCode":"};\n\nfunction unsupportedHook(): void {\n  throw new Error('This Hook is not supported in Server Components.');\n}\n\nfunction unsupportedRefresh(): void {\n  throw new Error(\n    'Refreshing the cache is not supported in Server Components.',\n  );\n}\n\nfunction unsupportedContext(): void {\n  throw new Error('Cannot read a Client Context from a Server Component.');\n}\n\nfunction useId(): string {\n  if (currentRequest === null) {\n    throw new Error('useId can only be used while React is rendering');\n  }\n  const id = currentRequest.identifierCount++;\n  // use 'S' for Flight components to distinguish from 'R' and 'r' in Fizz/Client\n  return '_' + currentRequest.identifierPrefix + 'S_' + id.toString(32) + '_';\n}\n\nfunction use<T>(usable: Usable<T>): T {\n  if (\n    // $FlowFixMe[invalid-compare]\n    (usable !== null && typeof usable === 'object') ||\n    typeof usable === 'function'\n  ) {\n    // $FlowFixMe[method-unbinding]\n    if (typeof usable.then === 'function') {\n      // This is a thenable.\n      const thenable: Thenable<T> = usable as any;\n\n      // Track the position of the thenable within this fiber.","sourceCodeStart":104,"sourceCodeEnd":140,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server/src/ReactFlightHooks.js#L104-L140","documentation":"useId in the Flight server runtime reads a module-level currentRequest that is only set while React is actively rendering a Flight request. The guard throws when useId() runs with no active request, i.e. outside the render pass. It is the server-side equivalent of an invalid hook call.","triggerScenarios":"Invoking useId() inside a Server Action body, inside a setTimeout/promise callback detached from rendering, at module scope, or from a helper function that runs after the component render has finished.","commonSituations":"Extracting id generation into a utility invoked lazily; generating ids inside queued/after-render work; calling client-style hooks from code paths that run without the hooks dispatcher installed.","solutions":["Call useId() directly in the component body during render and close over the returned value.","If you need an id inside a server action or callback, generate it with crypto.randomUUID() instead.","If the call sits below an await or inside a nested closure, hoist it to the synchronous top level of the component."],"exampleFix":"// before\nexport default function Page() {\n  const save = async () => {\n    const id = useId(); // throws: not rendering\n    await db.save(id);\n  };\n  return <Form action={save} />;\n}\n\n// after\nexport default function Page() {\n  const id = useId(); // during render\n  return <Form action={async () => { await db.save(id); }} />;\n}","handlingStrategy":"validation","validationCode":null,"typeGuard":null,"tryCatchPattern":null,"preventionTips":["Only call hooks at the top level of a component while it renders.","Never call hooks inside server actions, callbacks, timers, or after awaits.","Use crypto.randomUUID() when an id is needed outside of rendering.","Keep id generation in the component body and close over the value for later use."],"tags":["react","server-components","useid","hooks","invalid-hook-call"],"backgroundTag":"invalid-hook-call","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}