{"record":{"id":"9600f09e15b1f1ec","repo":"facebook/react","slug":"invalid-renderer-id-rendererid-for-element-9600f0","errorCode":null,"errorMessage":"Invalid renderer id \"${rendererID}\" for element \"${id}\"","messagePattern":"Invalid renderer id \"(.+?)\" for element \"(.+?)\"","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/react-devtools-shared/src/backend/views/Highlighter/index.js","lineNumber":184,"sourceCode":"  function highlightHostInstance({\n    displayName,\n    hideAfterTimeout,\n    id,\n    openBuiltinElementsPanel,\n    rendererID,\n    scrollIntoView,\n  }: {\n    displayName: string | null,\n    hideAfterTimeout: boolean,\n    id: number,\n    openBuiltinElementsPanel: boolean,\n    rendererID: number,\n    scrollIntoView: boolean,\n    ...\n  }) {\n    const renderer = agent.rendererInterfaces[rendererID];\n    if (renderer == null) {\n      console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n\n      hideOverlay(agent);\n      return;\n    }\n\n    // In some cases fiber may already be unmounted\n    if (!renderer.hasElementWithId(id)) {\n      hideOverlay(agent);\n      return;\n    }\n\n    const nodes = renderer.findHostInstancesForElementID(id);\n    if (nodes != null) {\n      for (let i = 0; i < nodes.length; i++) {\n        const node = nodes[i];\n        if (node === null) {\n          continue;\n        }","sourceCodeStart":166,"sourceCodeEnd":202,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-devtools-shared/src/backend/views/Highlighter/index.js#L166-L202","documentation":"highlightHostInstance() in the DevTools Highlighter (packages/react-devtools-shared/src/backend/views/Highlighter/index.js) draws the inspect overlay for an element. It resolves agent.rendererInterfaces[rendererID]; when that key is missing the renderer was unregistered (its root unmounted or the agent was torn down and rebuilt), so the highlight request references a renderer DevTools no longer knows. The overlay is hidden and the warning logged.","triggerScenarios":"A highlight request (hover in Components tree, 'show in elements') arriving after the renderer's root was unmounted; page reload while DevTools still had a pending highlight; multi-renderer apps where the rendererID belongs to a renderer that has since detached from the agent.","commonSituations":"Hovering/selecting elements right as a route change unmounts the inspected root; apps embedding multiple React renderers where one is disposed; DevTools panel reconnecting after a navigation.","solutions":["Trigger the highlight again after the tree/root settles (the new renderer will have a fresh rendererID).","Verify the element still exists in the Components tree before hovering to highlight.","If renderers are added/removed dynamically in your host app, make sure the agent is notified before you flush pending highlight requests."],"exampleFix":null,"handlingStrategy":"validation","validationCode":"const renderer = agent.rendererInterfaces[rendererID];\nif (renderer != null && renderer.hasElementWithId(id)) {\n  // safe to highlight\n  renderer.findHostInstancesForElementID(id);\n}","typeGuard":"const isRegisteredRenderer = (agent, rendererID) =>\n  Object.prototype.hasOwnProperty.call(agent.rendererInterfaces, rendererID);","tryCatchPattern":null,"preventionTips":["Always pair a rendererID with hasElementWithId before triggering highlights.","Drop cached ids/rendererIDs after root unmounts or page navigations.","Re-derive highlight targets from the current Components tree instead of stored state."],"tags":["react-devtools","highlighter","renderer-registration","dev-only"],"backgroundTag":"renderer-not-registered","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}