facebook/react · warning

Unexpected dehydrated hook; this is a DevTools error.

Error message

Unexpected dehydrated hook; this is a DevTools error.

What it means

React DevTools' InspectedElementHooksTree renders the inspected element's hooks, which may arrive partially 'dehydrated': hooks deeper than a complexity threshold are withheld until expanded, and dehydrated hooks are tagged via a meta.inspected property. Rendering a hook row that still carries meta.inspected means DevTools tried to display a hook whose data was never hydrated; the __DEV__ branch logs 'Unexpected dehydrated hook; this is a DevTools error.' and falls back to a '...' placeholder row. The message itself says this is a DevTools-internal inconsistency, not a bug in your component.

Source

Thrown at packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js:185

  const canDeletePaths = !isReadOnly && canEditHooksAndDeletePaths;
  const canEditValues = !isReadOnly && canEditHooks;
  const canRenamePaths = !isReadOnly && canEditHooksAndRenamePaths;

  const bridge = useContext(BridgeContext);
  const store = useContext(StoreContext);

  const [isOpen, setIsOpen] = useState<boolean>(false);

  const toggleIsOpen = useCallback(
    () => setIsOpen(prevIsOpen => !prevIsOpen),
    [],
  );

  if (hook.hasOwnProperty(meta.inspected)) {
    // This Hook is too deep and hasn't been hydrated.
    if (__DEV__) {
      console.warn('Unexpected dehydrated hook; this is a DevTools error.');
    }
    return (
      <div className={styles.Hook}>
        <div className={styles.NameValueRow}>
          <span className={styles.TruncationIndicator}>...</span>
        </div>
      </div>
    );
  }

  // Certain hooks are not editable at all (as identified by react-debug-tools).
  // Primitive hook names (e.g. the "State" name for useState) are also never editable.
  // $FlowFixMe[missing-local-annot]
  const canRenamePathsAtDepth = depth => isStateEditable && depth > 1;

  const isCustomHook = subHooks.length > 0;

  let name = hook.name;

View on GitHub (pinned to eafeac097b)

Solutions

1. Collapse and re-expand the hooks row, or re-select the element, to force a fresh inspectElement request with hydrated data.
2. Reload the inspected page with DevTools attached so the whole hooks tree is re-inspected from scratch.
3. Update the React DevTools extension (or the embedded react-devtools-shared package) to a build matching your React version.
4. If it reproduces on current versions, report it to the react-devtools repository with the hook structure — the code marks it as a DevTools error.

When it happens

Trigger: Expanding deep custom-hook chains in the Components panel while the inspected element re-renders; a stale inspectElement response racing tree changes (remount, key change, Fast Refresh) that invalidates cached hook paths; navigating the owners tree into a hook path that was pruned.

Common situations: Inspecting components with many nested custom hooks; hot reload / Fast Refresh while the panel is open; version skew between the DevTools extension and the react-dom build being inspected; genuine DevTools bugs in hook-path bookkeeping.

Related errors

• An unsupported type was passed to use(): ${String(usable)}
• Unknown Fiber. Needs to be a function component to inspect h
• Hooks not supported by this renderer
• react-cache: read and preload may only be called from within
• Section offsets must be ordered and non-overlapping.

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