DevTools: Fix another Fast Refresh edge case

Don't untrack unmounted Fibers after logging errors/warnings because it sometimes causes prematurely untracking a force-remounted Fiber from Fast Refresh, which in turn causes DevTools to break when the component is later inspected. This is a hack but I'm not sure of a better workaround.
facebook · May 20, 2021 · 794ed49 · 794ed49
1 parent ebcec3c
commit 794ed49
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/packages/react-devtools-shared/src/__tests__/treeContext-test.js b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
@@ -2384,7 +2384,7 @@ describe('TreeListContext', () => {
         );
 
         expect(state).toMatchInlineSnapshot(`
-          ✕ 0, ⚠ 1
+          ✕ 0, ⚠ 2
           [root]
              ▾ <Suspense>
                  <Child> ⚠

diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
@@ -1516,7 +1516,10 @@ export function attach(
         // We may also need to clean up after ourselves to avoid leaks.
         // See inline comments in onErrorOrWarning() for more info.
         if (isFiberMountedImpl(fiber) !== MOUNTED) {
-          untrackFiberID(fiber);
+          // HACK Cleaning up "unmounted" Fibers here can cause problems with Fast Refresh.
+          // Since warnings and errors are generally used in DEV mode,
+          // it may be better to ignore this kind of potential leak case rather than break Fast Refresh.
+          // untrackFiberID(fiber);
           return;
         }