[DevTools] Fix Profiler crash when recording why a memo() wrapper rendered #37819

Website or app

https://stackblitz.com/edit/vitejs-vite-qfa8tyuo?file=src/App.tsx

Repro steps

React version

• React: 19.3.0
• React DOM: 19.3.0
• React Developer Tools Chrome extension: 8.0.0
• Extension revision: 1d34f91dfd

Reproduction

Important: open the StackBlitz preview in a separate browser tab. React DevTools cannot profile the embedded StackBlitz iframe.

Steps to reproduce

1. Open the StackBlitz project above.
2. Open its preview in a separate tab.
3. Open React Developer Tools → Profiler.
4. In Profiler settings, enable Record why each component rendered while profiling.
5. Start a profiling recording.
6. Type one character into the input.
7. Stop the recording.

Actual behavior

React DevTools reports:

React instrumentation encountered an error:
Error: Unknown Fiber. Needs to be a function component to inspect hooks.
    at inspectHooksOfFiberImpl (installHook.js)
    at inspectHooksOfFiber (installHook.js)
    at inspectHooks (installHook.js)
    at recordProfilingDurations (installHook.js)
    at updateFiberRecursively (installHook.js)

The error is triggered by a controlled component implemented as memo(forwardRef(...)) when its parent re-renders and supplies a new inline onChange callback.

Typing changes the controlled value and re-renders the memoized forward-ref input with changed props. This triggers the DevTools instrumentation error.

Expected behavior

The Profiler should record render reasons without throwing an instrumentation error.

Minimal reproduction shape

const ControlledMemoInput = memo(
    forwardRef(function ControlledMemoInput(
        { onChange, value },
        forwardedRef
    ) {
        const context = useContext(InputContext);
        const inputRef = useRef(null);
        const isFilled = useMemo(() => value.length > 0, [value]);

        useEffect(() => {
            if (typeof forwardedRef === "function") {
                forwardedRef(inputRef.current);
            }
        }, [forwardedRef]);

        return (
            <input
                ref={inputRef}
                disabled={context.disabled}
                onChange={onChange}
                value={value}
                data-filled={isFilled}
            />
        );
    })
);

function App() {
    const [value, setValue] = useState("");
    const [renderRevision, setRenderRevision] = useState(0);

    useEffect(() => {
        setRenderRevision(1);
    }, []);

    return (
        <ControlledMemoInput
            value={value}
            onChange={(event) => setValue(event.target.value)}
        />
    );
}

Investigation

The failure appears to be inside React DevTools’ render-change inspection.

The profiler’s change-description path handles MemoComponent fibers and calls inspectHooks, but inspectHooksOfFiberImpl rejects the outer memo fiber with:

Unknown Fiber. Needs to be a function component to inspect hooks.

The relevant component is a memo(forwardRef(...)) Fiber, not a plain function component, simple memo component, or plain forward-ref component.

Workaround

Disable Record why each component rendered while profiling. Normal profiling continues to work, but render-reason information is unavailable.

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

Error component stack (automated)

GitHub query string (automated)