{"record":{"id":"5b8a09f51ffd65e8","repo":"facebook/react","slug":"an-unsupported-type-was-passed-to-use-string","errorCode":null,"errorMessage":"An unsupported type was passed to use(): ${String(usable)}","messagePattern":"An unsupported type was passed to use\\(\\): (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-debug-tools/src/ReactDebugHooks.js","lineNumber":277,"sourceCode":"    } else if (usable.$$typeof === REACT_CONTEXT_TYPE) {\n      const context: ReactContext<T> = usable as any;\n      const value = readContext(context);\n\n      hookLog.push({\n        displayName: context.displayName || 'Context',\n        primitive: 'Context (use)',\n        stackError: new Error(),\n        value,\n        debugInfo: null,\n        dispatcherHookName: 'Use',\n      });\n\n      return value;\n    }\n  }\n\n  // eslint-disable-next-line react-internal/safe-string-coercion\n  throw new Error('An unsupported type was passed to use(): ' + String(usable));\n}\n\nfunction useContext<T>(context: ReactContext<T>): T {\n  const value = readContext(context);\n  hookLog.push({\n    displayName: context.displayName || null,\n    primitive: 'Context',\n    stackError: new Error(),\n    value: value,\n    debugInfo: null,\n    dispatcherHookName: 'Context',\n  });\n  return value;\n}\n\nfunction useState<S>(\n  initialState: (() => S) | S,\n): [S, Dispatch<BasicStateAction<S>>] {","sourceCodeStart":259,"sourceCodeEnd":295,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-debug-tools/src/ReactDebugHooks.js#L259-L295","documentation":"Thrown by react-debug-tools' internal re-implementation of the use() hook while DevTools-style hooks inspection replays a component's render. The debug dispatcher only knows three usable shapes: thenables (objects with a .then function), recoverable errors ($$typeof REACT_RECOVERABLE_TYPE), and contexts ($$typeof REACT_CONTEXT_TYPE). Any other value (null, undefined, strings, numbers, booleans, plain objects, arrays) falls through the checks and hits this throw.","triggerScenarios":"Inspecting hooks of a component that calls use() with a non-context, non-thenable value, e.g. use('light'), use(undefined) from a bad default, or use(MyContext.Provider) instead of use(MyContext). Also occurs when the react-debug-tools / DevTools version is older than the React version and does not recognize a newer usable type.","commonSituations":"Refactoring useContext(MyContext) to use(MyContext) and accidentally passing the Provider; conditional use() calls that sometimes receive undefined; upgrading React to a canary while keeping an older DevTools extension or a pinned react-debug-tools dependency in custom tooling.","solutions":["Pass only a React.createContext() result, a promise/thenable, or a React-provided recoverable to use()","If you passed MyContext.Provider, pass MyContext itself - use() takes the context object, not the provider component","Update React DevTools (or react-debug-tools) to the release matching your React version so every usable $$typeof is recognized","If you build inspection tooling on react-debug-tools, catch this error and mark the component as uninspectable instead of crashing"],"exampleFix":"// before\nconst theme = use(ThemeContext.Provider); // plain component object -> throws\n\n// after\nconst theme = use(ThemeContext); // context object created by createContext()","handlingStrategy":"type-guard","validationCode":"// before render, verify every use() argument is a context, thenable, or recoverable\nimport {REACT_CONTEXT_TYPE, REACT_RECOVERABLE_TYPE} from 'shared/ReactSymbols';\n\nfunction assertUsable(usable: mixed) {\n  const ok = usable !== null && typeof usable === 'object' &&\n    (typeof usable.then === 'function' ||\n      usable.$$typeof === REACT_RECOVERABLE_TYPE ||\n      usable.$$typeof === REACT_CONTEXT_TYPE);\n  if (!ok) throw new TypeError('use() only accepts a context, thenable, or recoverable');\n}","typeGuard":"function isUsable(v: mixed): boolean {\n  if (v === null || typeof v !== 'object') return false;\n  if (typeof v.then === 'function') return true; // thenable\n  const t: mixed = (v: any).$$typeof;\n  return t === REACT_CONTEXT_TYPE || t === REACT_RECOVERABLE_TYPE;\n}","tryCatchPattern":"// for inspection tooling built on react-debug-tools\ntry {\n  const tree = inspectHooksOfFiber(fiber, dispatcherRef);\n} catch (e) {\n  if (e instanceof Error && e.message.startsWith('An unsupported type was passed to use()')) {\n    return markUninspectable(fiber, e); // degrade instead of crashing the inspector\n  }\n  throw e;\n}","preventionTips":["Only pass values created by React.createContext(), promises, or React-provided recoverables to use()","Never call use() conditionally such that a branch passes undefined - hoist and guard the argument instead","Keep react-debug-tools / DevTools versions in lockstep with the React version you inspect","When wrapping useContext -> use refactors, lint for use(X.Provider) mistakes"],"tags":["react","hooks","use","devtools","type-error","inspection"],"backgroundTag":"invalid-hook-argument","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}