{"record":{"id":"456a11968a569d9a","repo":"facebook/react","slug":"unexpected-dehydrated-hook-this-is-a-devtools-err","errorCode":null,"errorMessage":"Unexpected dehydrated hook; this is a DevTools error.","messagePattern":"Unexpected dehydrated hook; this is a DevTools error\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js","lineNumber":185,"sourceCode":"\n  const canDeletePaths = !isReadOnly && canEditHooksAndDeletePaths;\n  const canEditValues = !isReadOnly && canEditHooks;\n  const canRenamePaths = !isReadOnly && canEditHooksAndRenamePaths;\n\n  const bridge = useContext(BridgeContext);\n  const store = useContext(StoreContext);\n\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n\n  const toggleIsOpen = useCallback(\n    () => setIsOpen(prevIsOpen => !prevIsOpen),\n    [],\n  );\n\n  if (hook.hasOwnProperty(meta.inspected)) {\n    // This Hook is too deep and hasn't been hydrated.\n    if (__DEV__) {\n      console.warn('Unexpected dehydrated hook; this is a DevTools error.');\n    }\n    return (\n      <div className={styles.Hook}>\n        <div className={styles.NameValueRow}>\n          <span className={styles.TruncationIndicator}>...</span>\n        </div>\n      </div>\n    );\n  }\n\n  // Certain hooks are not editable at all (as identified by react-debug-tools).\n  // Primitive hook names (e.g. the \"State\" name for useState) are also never editable.\n  // $FlowFixMe[missing-local-annot]\n  const canRenamePathsAtDepth = depth => isStateEditable && depth > 1;\n\n  const isCustomHook = subHooks.length > 0;\n\n  let name = hook.name;","sourceCodeStart":167,"sourceCodeEnd":203,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js#L167-L203","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Collapse and re-expand the hooks row, or re-select the element, to force a fresh inspectElement request with hydrated data.","Reload the inspected page with DevTools attached so the whole hooks tree is re-inspected from scratch.","Update the React DevTools extension (or the embedded react-devtools-shared package) to a build matching your React version.","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."],"exampleFix":null,"handlingStrategy":"fallback","validationCode":null,"typeGuard":null,"tryCatchPattern":null,"preventionTips":["Treat the warning as non-fatal — DevTools renders a '...' placeholder and the panel keeps working.","Re-select the element or re-expand hooks after reloads/Fast Refresh to force fresh, hydrated inspections.","Keep the DevTools extension and the inspected react-dom on matching versions.","Report reproducible cases to the react-devtools repo — the code itself labels this a DevTools error."],"tags":["react-devtools","hooks","inspection","devtools"],"backgroundTag":"stale-inspection-data","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}