facebook/react · warning

Invalid renderer id "${match.rendererID}" for element "${mat

Error message

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

What it means

In the Highlighter's mouse-over handler, when inspecting only Suspense-related nodes DevTools maps the hovered DOM target to {id, rendererID} via agent.getIDForHostInstance(target, true). It then resolves agent.rendererInterfaces[match.rendererID]; if that renderer is no longer registered (root unmounting or agent teardown racing the hover), the hover highlight is dropped with this warning. It is a benign race between DOM inspection and renderer registration.

Source

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

        }
      } catch (error) {
        // This can error when the iframe is on a cross-origin.
      }
    }

    if (inspectOnlySuspenseNodes) {
      // For Suspense nodes we want to highlight not the actual target but the nodes
      // that are the root of the Suspense node.
      // TODO: Consider if we should just do the same for other elements because the
      // hovered node might just be one child of many in the Component.
      const match = agent.getIDForHostInstance(
        target,
        inspectOnlySuspenseNodes,
      );
      if (match !== null) {
        const renderer = agent.rendererInterfaces[match.rendererID];
        if (renderer == null) {
          console.warn(
            `Invalid renderer id "${match.rendererID}" for element "${match.id}"`,
          );
          return;
        }
        highlightHostInstance({
          displayName: renderer.getDisplayNameForElementID(match.id),
          hideAfterTimeout: false,
          id: match.id,
          openBuiltinElementsPanel: false,
          rendererID: match.rendererID,
          scrollIntoView: false,
        });
      }
    } else {
      // Don't pass the name explicitly.
      // It will be inferred from DOM tag and Fiber owner.
      showOverlay([target], null, agent, false);
    }

View on GitHub (pinned to eafeac097b)

Solutions

1. Ignore it if it appears once during teardown — it is a no-op guard, not a functional failure.
2. Hover again after the unmount/reload completes.
3. Avoid hovering during known teardown windows when using the Suspense inspection mode.

const match = agent.getIDForHostInstance(target, true);
if (match !== null && agent.rendererInterfaces[match.rendererID] != null) {
  // safe to highlight
}

When it happens

Trigger: Hovering the page exactly while a root is being unmounted or the renderer is detaching from the DevTools agent; hovering Suspense boundary DOM during a page reload; inspectOnlySuspenseNodes mode active in the Activity/Suspense tab.

Common situations: Mouse-over during route transitions that unmount roots; hovering while HMR swaps the tree; DevTools attached to an app whose roots are frequently created and destroyed.

Related errors

• Invalid renderer id "${rendererID}" for element "${id}"
• Cannot not suspend ID '${suspendedSet[i]}'.
• No suspense found with id "${id}"
• The should not be any remaining suspense node children if th
• There should always be an Offscreen Fiber child in a hydrate

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