{"record":{"id":"635573e3cc84d507","repo":"facebook/react","slug":"503","errorCode":"503","errorMessage":"Cannot use() an already resolved Client Reference.","messagePattern":"Cannot use\\(\\) an already resolved Client Reference\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-server/src/ReactFlightHooks.js","lineNumber":162,"sourceCode":"      if (thenableState === null) {\n        thenableState = createThenableState();\n      }\n      return trackUsedThenable(thenableState, thenable, index);\n    } else if (usable.$$typeof === REACT_CONTEXT_TYPE) {\n      unsupportedContext();\n    }\n  }\n\n  if (isClientReference(usable)) {\n    const clientReference: any = usable;\n    if (\n      clientReference.value != null &&\n      clientReference.value.$$typeof === REACT_CONTEXT_TYPE\n    ) {\n      // Show a more specific message since it's a common mistake.\n      throw new Error('Cannot read a Client Context from a Server Component.');\n    } else {\n      throw new Error('Cannot use() an already resolved Client Reference.');\n    }\n  } else {\n    throw new Error(\n      // eslint-disable-next-line react-internal/safe-string-coercion\n      'An unsupported type was passed to use(): ' + String(usable),\n    );\n  }\n}\n","sourceCodeStart":144,"sourceCodeEnd":171,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server/src/ReactFlightHooks.js#L144-L171","documentation":"use() accepts thenables and (server) contexts. If it receives a client reference that is not a context but already carries a resolved .value, there is nothing left to unwrap, so React throws. It usually means the already-initialized export of a 'use client' module was passed to use() directly.","triggerScenarios":"Calling use(clientRef) where clientRef is a function/class/object from a 'use client' file that has already been initialized, e.g. use(SomeButton) instead of rendering SomeButton.","commonSituations":"Generic wrapper code that calls use(x) on arbitrary values to 'support anything awaitable'; passing a client component or hook object into use() by mistake; test code probing use() semantics.","solutions":["Do not call use() on components or objects from client modules; render or invoke them directly.","Verify what you passed: use() only unwraps thenables, server contexts, or client references that resolve to contexts.","Narrow the value first (check typeof x.then === 'function') before calling use()."],"exampleFix":"// before\nimport {Button} from './ui'; // 'use client' module\nconst Btn = use(Button); // throws: already resolved client reference\n\n// after\nimport {Button} from './ui';\nreturn <Button />; // client exports are used directly","handlingStrategy":"type-guard","validationCode":null,"typeGuard":"function isThenable<T>(x: unknown): x is PromiseLike<T> {\n  return !!x && typeof (x as PromiseLike<T>).then === 'function';\n}\n// only call use() when isThenable(x) is true; otherwise use x directly","tryCatchPattern":null,"preventionTips":["Use exports from 'use client' modules directly; never pass them to use().","In generic wrappers, check for a then method before calling use().","Remember use() unwraps promises and contexts only - it is not a universal resolver."],"tags":["react","use","client-references","server-components"],"backgroundTag":"react-use-invalid-argument","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}