facebook/react · error · Error

Hooks not supported by this renderer

Error message

Hooks not supported by this renderer

What it means

Thrown by the DevTools backend's legacy (stack) renderer adapter when the frontend asks it to delete a value inside a component's hooks. React 15 and earlier used the stack reconciler, which has no hooks concept, so this adapter only implements edits for props, state, and context. The error means a hook-edit command was routed to a pre-fiber renderer that cannot store hook state.

Source

Thrown at packages/react-devtools-shared/src/backend/legacy/renderer.js:1099

  }

  function deletePath(
    type: 'context' | 'hooks' | 'props' | 'state',
    id: number,
    hookID: ?number,
    path: Array<string | number>,
  ): void {
    const internalInstance = idToInternalInstanceMap.get(id);
    if (internalInstance != null) {
      const publicInstance = internalInstance._instance;
      if (publicInstance != null) {
        switch (type) {
          case 'context':
            deletePathInObject(publicInstance.context, path);
            forceUpdate(publicInstance);
            break;
          case 'hooks':
            throw new Error('Hooks not supported by this renderer');
          case 'props':
            const element = internalInstance._currentElement;
            internalInstance._currentElement = {
              ...element,
              props: copyWithDelete(element.props, path),
            };
            forceUpdate(publicInstance);
            break;
          case 'state':
            deletePathInObject(publicInstance.state, path);
            forceUpdate(publicInstance);
            break;
        }
      }
    }
  }

  function renamePath(

View on GitHub (pinned to eafeac097b)

Solutions

  1. If the inspected app is on React 15, accept that hooks cannot exist there — edit state or props instead of hook values.
  2. Upgrade the inspected app to React 16.8+ (fiber) if you need hook inspection and editing.
  3. Align DevTools versions (update the browser extension / standalone / react-devtools package) so the frontend stops offering hook edits on legacy roots.
  4. For custom embeds, only send type:'hooks' edit commands when the inspected element's hooks list is non-null.

Example fix

// before
bridge.send('deletePath', {id, type: 'hooks', hookID, path, rendererID});

// after — only send hook edits when the element actually has hooks
if (inspectedElement.hooks != null) {
  bridge.send('deletePath', {id, type: 'hooks', hookID, path, rendererID});
}
Defensive patterns

Strategy: type-guard

Validate before calling

const isFiberRenderer = renderer =>
  typeof renderer.findFiberByHostInstance === 'function';
if (!isFiberRenderer(renderer)) {
  // stack renderer (v15): no hook state exists, only props/state/context
}

Type guard

function supportsHookEdits(inspectedElement) {
  return inspectedElement.hooks != null && inspectedElement.hooks.length > 0;
}

Try / catch

try {
  deletePath('hooks', id, hookID, path);
} catch (error) {
  if (/Hooks not supported by this renderer/.test(error.message)) return; // legacy root, nothing to edit
  throw error;
}

Prevention

When it happens

Trigger: The backend receives deletePath('hooks', id, hookID, path) — emitted by the DevTools Inspector when you right-click a hook entry and choose 'Delete value' — while the attached renderer was wrapped by packages/react-devtools-shared/src/backend/legacy/renderer.js (React <= 15 or a custom stack renderer).

Common situations: App (or one subtree) runs React 15 while the DevTools frontend is a newer build that still shows a hooks editor; multi-root pages mixing v15 and v16 where ids get crossed; version skew between the DevTools extension/standalone build and an embedded React Native backend.

Related errors


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