{"record":{"id":"7442e5659290995f","repo":"facebook/react","slug":"hooks-not-supported-by-this-renderer","errorCode":null,"errorMessage":"Hooks not supported by this renderer","messagePattern":"Hooks not supported by this renderer","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-devtools-shared/src/backend/legacy/renderer.js","lineNumber":1099,"sourceCode":"  }\n\n  function deletePath(\n    type: 'context' | 'hooks' | 'props' | 'state',\n    id: number,\n    hookID: ?number,\n    path: Array<string | number>,\n  ): void {\n    const internalInstance = idToInternalInstanceMap.get(id);\n    if (internalInstance != null) {\n      const publicInstance = internalInstance._instance;\n      if (publicInstance != null) {\n        switch (type) {\n          case 'context':\n            deletePathInObject(publicInstance.context, path);\n            forceUpdate(publicInstance);\n            break;\n          case 'hooks':\n            throw new Error('Hooks not supported by this renderer');\n          case 'props':\n            const element = internalInstance._currentElement;\n            internalInstance._currentElement = {\n              ...element,\n              props: copyWithDelete(element.props, path),\n            };\n            forceUpdate(publicInstance);\n            break;\n          case 'state':\n            deletePathInObject(publicInstance.state, path);\n            forceUpdate(publicInstance);\n            break;\n        }\n      }\n    }\n  }\n\n  function renamePath(","sourceCodeStart":1081,"sourceCodeEnd":1117,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-devtools-shared/src/backend/legacy/renderer.js#L1081-L1117","documentation":"Thrown by the DevTools backend's legacy (stack) renderer adapter when the frontend asks it to delete a value inside a component's hooks. React 15 and earlier used the stack reconciler, which has no hooks concept, so this adapter only implements edits for props, state, and context. The error means a hook-edit command was routed to a pre-fiber renderer that cannot store hook state.","triggerScenarios":"The backend receives deletePath('hooks', id, hookID, path) — emitted by the DevTools Inspector when you right-click a hook entry and choose 'Delete value' — while the attached renderer was wrapped by packages/react-devtools-shared/src/backend/legacy/renderer.js (React <= 15 or a custom stack renderer).","commonSituations":"App (or one subtree) runs React 15 while the DevTools frontend is a newer build that still shows a hooks editor; multi-root pages mixing v15 and v16 where ids get crossed; version skew between the DevTools extension/standalone build and an embedded React Native backend.","solutions":["If the inspected app is on React 15, accept that hooks cannot exist there — edit state or props instead of hook values.","Upgrade the inspected app to React 16.8+ (fiber) if you need hook inspection and editing.","Align DevTools versions (update the browser extension / standalone / react-devtools package) so the frontend stops offering hook edits on legacy roots.","For custom embeds, only send type:'hooks' edit commands when the inspected element's hooks list is non-null."],"exampleFix":"// before\nbridge.send('deletePath', {id, type: 'hooks', hookID, path, rendererID});\n\n// after — only send hook edits when the element actually has hooks\nif (inspectedElement.hooks != null) {\n  bridge.send('deletePath', {id, type: 'hooks', hookID, path, rendererID});\n}","handlingStrategy":"type-guard","validationCode":"const isFiberRenderer = renderer =>\n  typeof renderer.findFiberByHostInstance === 'function';\nif (!isFiberRenderer(renderer)) {\n  // stack renderer (v15): no hook state exists, only props/state/context\n}","typeGuard":"function supportsHookEdits(inspectedElement) {\n  return inspectedElement.hooks != null && inspectedElement.hooks.length > 0;\n}","tryCatchPattern":"try {\n  deletePath('hooks', id, hookID, path);\n} catch (error) {\n  if (/Hooks not supported by this renderer/.test(error.message)) return; // legacy root, nothing to edit\n  throw error;\n}","preventionTips":["Only render hooks-edit UI when the inspected element exposes a hooks list.","Gate renderer-level commands on the fiber capability check (findFiberByHostInstance).","Keep DevTools frontend and backend versions aligned when embedding."],"tags":["devtools","hooks","legacy-renderer","react-15","inspector"],"backgroundTag":"unsupported-renderer-feature","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}