facebook/react · error · Error

An unsupported type was passed to use(): ${String(usable)}

Error message

An unsupported type was passed to use(): ${String(usable)}

What it means

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.

Source

Thrown at packages/react-debug-tools/src/ReactDebugHooks.js:277

    } else if (usable.$$typeof === REACT_CONTEXT_TYPE) {
      const context: ReactContext<T> = usable as any;
      const value = readContext(context);

      hookLog.push({
        displayName: context.displayName || 'Context',
        primitive: 'Context (use)',
        stackError: new Error(),
        value,
        debugInfo: null,
        dispatcherHookName: 'Use',
      });

      return value;
    }
  }

  // eslint-disable-next-line react-internal/safe-string-coercion
  throw new Error('An unsupported type was passed to use(): ' + String(usable));
}

function useContext<T>(context: ReactContext<T>): T {
  const value = readContext(context);
  hookLog.push({
    displayName: context.displayName || null,
    primitive: 'Context',
    stackError: new Error(),
    value: value,
    debugInfo: null,
    dispatcherHookName: 'Context',
  });
  return value;
}

function useState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {

View on GitHub (pinned to eafeac097b)

Solutions

1. Pass only a React.createContext() result, a promise/thenable, or a React-provided recoverable to use()
2. If you passed MyContext.Provider, pass MyContext itself - use() takes the context object, not the provider component
3. Update React DevTools (or react-debug-tools) to the release matching your React version so every usable $$typeof is recognized
4. If you build inspection tooling on react-debug-tools, catch this error and mark the component as uninspectable instead of crashing

Example fix

// before
const theme = use(ThemeContext.Provider); // plain component object -> throws

// after
const theme = use(ThemeContext); // context object created by createContext()

// before render, verify every use() argument is a context, thenable, or recoverable
import {REACT_CONTEXT_TYPE, REACT_RECOVERABLE_TYPE} from 'shared/ReactSymbols';

function assertUsable(usable: mixed) {
  const ok = usable !== null && typeof usable === 'object' &&
    (typeof usable.then === 'function' ||
      usable.$$typeof === REACT_RECOVERABLE_TYPE ||
      usable.$$typeof === REACT_CONTEXT_TYPE);
  if (!ok) throw new TypeError('use() only accepts a context, thenable, or recoverable');
}

function isUsable(v: mixed): boolean {
  if (v === null || typeof v !== 'object') return false;
  if (typeof v.then === 'function') return true; // thenable
  const t: mixed = (v: any).$$typeof;
  return t === REACT_CONTEXT_TYPE || t === REACT_RECOVERABLE_TYPE;
}

// for inspection tooling built on react-debug-tools
try {
  const tree = inspectHooksOfFiber(fiber, dispatcherRef);
} catch (e) {
  if (e instanceof Error && e.message.startsWith('An unsupported type was passed to use()')) {
    return markUninspectable(fiber, e); // degrade instead of crashing the inspector
  }
  throw e;
}

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• Unknown Fiber. Needs to be a function component to inspect h
• 438
• Unexpected dehydrated hook; this is a DevTools error.
• Hooks not supported by this renderer
• react-cache: read and preload may only be called from within

AI-assisted analysis of facebook/react@eafeac097b (2026-08-21). Data as JSON: /api/errors/5b8a09f51ffd65e8. Report an issue: GitHub.