{"record":{"id":"89b23ca0c749d2e4","repo":"facebook/react","slug":"could-not-find-instance-with-id-id","errorCode":null,"errorMessage":"Could not find instance with id \"${id}\"","messagePattern":"Could not find instance with id \"(.+?)\"","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/react-devtools-shared/src/backend/legacy/renderer.js","lineNumber":691,"sourceCode":"    if (internalInstance != null) {\n      instance = internalInstance._instance || null;\n\n      const element = internalInstance._currentElement;\n      if (element != null && element.props != null) {\n        style = element.props.style || null;\n      }\n    }\n\n    return {\n      instance,\n      style,\n    };\n  }\n\n  function updateSelectedElement(id: number): void {\n    const internalInstance = idToInternalInstanceMap.get(id);\n    if (internalInstance == null) {\n      console.warn(`Could not find instance with id \"${id}\"`);\n      return;\n    }\n\n    switch (getElementType(internalInstance)) {\n      case ElementTypeClass:\n        global.$r = internalInstance._instance;\n        break;\n      case ElementTypeFunction:\n        const element = internalInstance._currentElement;\n        if (element == null) {\n          console.warn(`Could not find element with id \"${id}\"`);\n          return;\n        }\n\n        global.$r = {\n          props: element.props,\n          type: element.type,\n        };","sourceCodeStart":673,"sourceCodeEnd":709,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-devtools-shared/src/backend/legacy/renderer.js#L673-L709","documentation":"updateSelectedElement() in the legacy DevTools backend (for pre-Fiber React, packages/react-devtools-shared/src/backend/legacy/renderer.js) assigns the currently selected element to console global $r. It first resolves the selected id via idToInternalInstanceMap; if the map has no entry, the element is gone from the renderer's view of the tree, so DevTools logs this warning and leaves $r untouched. This is a stale-id condition: the id was valid when selected but the instance was unmounted (or the renderer re-registered) before the lookup.","triggerScenarios":"Selecting an element in the Components tree and the component unmounting before DevTools runs updateSelectedElement (e.g. 'store as global variable' or re-selecting after an update); a hot reload replacing the root; calling inspect-at-point on a node removed by a timer or websocket update.","commonSituations":"Inspecting apps on React < 16 with the DevTools legacy backend while the UI keeps updating; holding an old selection across HMR; debugging components that unmount immediately after render.","solutions":["Re-select the element in the Components tree so the id-to-instance map is fresh, then retry the inspection.","Freeze the UI (breakpoint, 'Emulate a focused page', or pause on unmount) so the element cannot disappear before you inspect it.","Upgrade the app to React 16+ so DevTools uses the Fiber backend with a more robust id map."],"exampleFix":null,"handlingStrategy":"validation","validationCode":"// Backend-internal; the equivalent guard if you drive a DevTools agent:\nconst renderer = agent.rendererInterfaces[rendererID];\nif (renderer != null && renderer.hasElementWithId(id)) {\n  // safe to inspect/select\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Re-select the element right before using $r; do not hold $r across renders.","Pause app updates (breakpoints, 'Emulate a focused page') while inspecting volatile components.","Prefer Fiber-era React so DevTools uses the non-legacy backend."],"tags":["react-devtools","legacy-renderer","element-selection","dev-only"],"backgroundTag":"stale-element-reference","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}