facebook/react · warning

Invalid renderer id "${rendererID}" for element "${id}"

Error message

Invalid renderer id "${rendererID}" for element "${id}"

What it means

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.

Source

Thrown at packages/react-devtools-shared/src/backend/views/Highlighter/index.js:184

  function highlightHostInstance({
    displayName,
    hideAfterTimeout,
    id,
    openBuiltinElementsPanel,
    rendererID,
    scrollIntoView,
  }: {
    displayName: string | null,
    hideAfterTimeout: boolean,
    id: number,
    openBuiltinElementsPanel: boolean,
    rendererID: number,
    scrollIntoView: boolean,
    ...
  }) {
    const renderer = agent.rendererInterfaces[rendererID];
    if (renderer == null) {
      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);

      hideOverlay(agent);
      return;
    }

    // In some cases fiber may already be unmounted
    if (!renderer.hasElementWithId(id)) {
      hideOverlay(agent);
      return;
    }

    const nodes = renderer.findHostInstancesForElementID(id);
    if (nodes != null) {
      for (let i = 0; i < nodes.length; i++) {
        const node = nodes[i];
        if (node === null) {
          continue;
        }

View on GitHub (pinned to eafeac097b)

Solutions

1. Trigger the highlight again after the tree/root settles (the new renderer will have a fresh rendererID).
2. Verify the element still exists in the Components tree before hovering to highlight.
3. If renderers are added/removed dynamically in your host app, make sure the agent is notified before you flush pending highlight requests.

const renderer = agent.rendererInterfaces[rendererID];
if (renderer != null && renderer.hasElementWithId(id)) {
  // safe to highlight
  renderer.findHostInstancesForElementID(id);
}

const isRegisteredRenderer = (agent, rendererID) =>
  Object.prototype.hasOwnProperty.call(agent.rendererInterfaces, rendererID);

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• Invalid renderer id "${match.rendererID}" for element "${mat
• Cannot not suspend ID '${suspendedSet[i]}'.
• Could not find instance with id "${id}"
• Could not find element with id "${id}"
• Profiling data cannot be updated while profiling is in progr

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