Don't append Component Stack in React DevTools if we already have a n…

…ative task

If the current Fiber already has a native task, then it might be in a native async task and so we already have a component stack.

If it doesn't have a native task, it's because this is not DEV mode or it's an older React or React didn't detect console.createTask.

packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js

@@ -98,3 +98,10 @@ export function getStackByFiberInDevAndProd(
     return '\nError generating stack: ' + x.message + '\n' + x.stack;
   }
 }
+
+export function supportsNativeConsoleTasks(fiber: Fiber): boolean {
+  // If this Fiber supports native console.createTask then we are already running
+  // inside a native async stack trace if it's active - meaning the DevTools is open.
+  // Ideally we'd detect if this task was created while the DevTools was open or not.
+  return !!fiber._debugTask;
+}

packages/react-devtools-shared/src/backend/console.js

@@ -18,7 +18,10 @@ import type {
 import {format, formatWithStyles} from './utils';
 
 import {getInternalReactConstants, getDispatcherRef} from './renderer';
-import {getStackByFiberInDevAndProd} from './DevToolsFiberComponentStack';
+import {
+  getStackByFiberInDevAndProd,
+  supportsNativeConsoleTasks,
+} from './DevToolsFiberComponentStack';
 import {consoleManagedByDevToolsDuringStrictMode} from 'react-devtools-feature-flags';
 import {castBool, castBrowserTheme} from '../utils';
 
@@ -235,7 +238,10 @@ export function patch({
                   }
                 }
 
-                if (shouldAppendWarningStack) {
+                if (
+                  shouldAppendWarningStack &&
+                  !supportsNativeConsoleTasks(current)
+                ) {
                   const componentStack = getStackByFiberInDevAndProd(
                     workTagMap,
                     current,