facebook/react · warning

Invalid renderer id "${rendererID}"

Error message

Invalid renderer id "${rendererID}"

What it means

The DevTools backend Agent keeps a map of renderer interfaces (this._rendererInterfaces) populated when each React renderer injects itself, and routes every bridge message through it. clearErrorsAndWarnings — sent when you clear all errors/warnings, e.g. from the DevTools console panel — looks up this._rendererInterfaces[rendererID]; on a miss it warns `Invalid renderer id "N"` and does nothing. The warning means the frontend referenced a renderer the backend no longer has registered.

Source

Thrown at packages/react-devtools-shared/src/backend/agent.js:379

    // By this time, Store should already be initialized and intercept events
    bridge.send('backendInitialized');

    if (this._isProfiling) {
      bridge.send('profilingStatus', true);
    }
  }

  get rendererInterfaces(): {[key: RendererID]: RendererInterface, ...} {
    return this._rendererInterfaces;
  }

  clearErrorsAndWarnings: ({rendererID: RendererID}) => void = ({
    rendererID,
  }) => {
    const renderer = this._rendererInterfaces[rendererID];
    if (renderer == null) {
      console.warn(`Invalid renderer id "${rendererID}"`);
    } else {
      renderer.clearErrorsAndWarnings();
    }
  };

  clearErrorsForElementID: ElementAndRendererID => void = ({
    id,
    rendererID,
  }) => {
    const renderer = this._rendererInterfaces[rendererID];
    if (renderer == null) {
      console.warn(`Invalid renderer id "${rendererID}"`);
    } else {
      renderer.clearErrorsForElementID(id);
    }
  };

  clearWarningsForElementID: ElementAndRendererID => void = ({

View on GitHub (pinned to eafeac097b)

Solutions

1. Reload the inspected page (and reopen DevTools) so renderers re-register and the frontend rebuilds its tree.
2. If you embed DevTools, validate rendererID against agent.rendererInterfaces before sending bridge messages.
3. Update the React DevTools extension and react-devtools-shared together so the bridge protocol matches.
4. Ignore the warning when the renderer was intentionally unmounted — the operation is skipped, nothing is corrupted.

// Embedder-side: only target renderers the backend actually has.
const hasRenderer = (agent: any, rendererID: number) =>
  Object.prototype.hasOwnProperty.call(agent.rendererInterfaces, rendererID);

if (hasRenderer(agent, rendererID)) {
  agent.clearErrorsAndWarnings({rendererID});
}

function isValidRendererID(agent: any, rendererID: number): boolean {
  return agent.rendererInterfaces[rendererID] != null;
}

When it happens

Trigger: The DevTools UI sends 'clearErrorsAndWarnings' with a rendererID whose renderer unregistered — the inspected app reloaded, a second root unmounted, or a React Native reload happened — while the frontend still held the old renderer id.

Common situations: Page reload with DevTools open and console state persisted; multi-renderer pages (main app plus embedded widget) where one detaches; frontend/backend version skew after updating only the extension.

Related errors

• Invalid renderer id "${rendererID}" for element "${id}"
• Wall.listen() must return an unlisten function.
• Bridge event names must be non-empty strings.
• Cannot ${action} through a Bridge that has been shut down.
• Unexpected dehydrated hook; this is a DevTools error.

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