[DevTools Bug] Commit tree already contains fiber "1088". This is a bug in React DevTools.

[MohitPatel1]

Website or app

online.smartagent.one/order/list

Repro steps

my profiler has broken

How often does this bug happen?

Every time

DevTools package (automated)

react-devtools-extensions

DevTools version (automated)

7.0.1-3cde211b0c

Error message (automated)

Commit tree already contains fiber "1088". This is a bug in React DevTools.

Error call stack (automated)

at updateTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:699600)
    at getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:698760)
    at $e.getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:703384)
    at CommitFlamegraphAutoSizer (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1005870)
    at renderWithHooks (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:66940)
    at updateFunctionComponent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:97513)
    at beginWork (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:111594)
    at performUnitOfWork (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:184246)
    at workLoopSync (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:184102)
    at renderRootSync (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:183886)

Error component stack (automated)

at CommitFlamegraphAutoSizer (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1005671)
    at div (<anonymous>)
    at div (<anonymous>)
    at div (<anonymous>)
    at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:879909)
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1144384
    at ao (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:898411)
    at div (<anonymous>)
    at div (<anonymous>)
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:901116)
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:901313
    at div (<anonymous>)
    at div (<anonymous>)
    at div (<anonymous>)
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:901116)
    at SuspenseTreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1147064)
    at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:915935)
    at TimelineContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:994422)
    at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:986233)
    at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:786019)
    at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:815755)
    at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:972480)
    at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1175879)

GitHub query string (automated)

https://api.github.com/search/issues?q=Commit tree already contains fiber . This is a bug in React DevTools. in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react

[jaens]

Clicking on a bar in the "mini graph" broke it for me:

[jaens]

Ah, also using the arrows triggers it at some point. 100% reproducible.

This makes the profiler pretty much unusable...

[eps1lon]

Can you share the app the produces this result? Ideally reduced as much as possible from the Component tree until the error no longer reproduces.

[jaens]

It's a >100kLoC app and the component tree was about 50 deep so uhh... unless there's some automated way to do test case reduction, no...

[milk717]

@eps1lon

I encountered the same issue, and in my case, it was triggered by a mistake in my code structure that caused excessive remounting.

Here is the scenario that led to the crash:

1. Context I implemented an infinite scroll list using useSuspenseInfiniteQuery (TanStack Query) wrapped in a parent <Suspense> boundary.

2. The Mistake Inside each list item component, I was calling another useSuspenseQuery to fetch nested data (e.g., a toggle button state), but I forgot to wrap this child component in its own <Suspense> boundary.

3. Reproduction of the Crash

When I scrolled down, fetchNextPage was triggered, rendering new list items.

The nested useSuspenseQuery in these new items immediately suspended because data wasn't cached yet.

Since there was no local suspense boundary, the suspension bubbled up to the top-level parent boundary (the one wrapping the entire list).

This caused the entire list component to unmount and remount rapidly every time new items were fetched.

4. Result This extreme cycle of unmounting and remounting the entire list seems to have caused the DevTools fiber tree to get out of sync with the actual React tree, resulting in the error:

Uncaught Error: Commit tree already contains fiber "XXX".

Once I wrapped the child component in its own <Suspense> (or removed the suspense query), the excessive remounting stopped, and the DevTools error disappeared.

I hope this context helps in diagnosing the DevTools synchronization issue!

[FHeNuS]

Yes, also have this same error. It happens on a virtualized grid with Tanstack Virtual, but it was also happening when I was using React-Window. I tried to strip down the rendering of the components and the cells of the table/grid I'm using it, there is a rerender that is happening that I can't understand why, and the profiler crashes on the render that I need to see :(