fix: mount devtools overlay only if react devtools are connected (#38784

)
facebook · Aug 15, 2023 · b3c7a5d · b3c7a5d
1 parent 7636e4c
commit b3c7a5d
Showing 1 changed file with 28 additions and 6 deletions.
diff --git a/Libraries/ReactNative/AppContainer.js b/Libraries/ReactNative/AppContainer.js
@@ -17,6 +17,8 @@ import {type EventSubscription} from '../vendor/emitter/EventEmitter';
 import {RootTagContext, createRootTag} from './RootTag';
 import * as React from 'react';
 
+const reactDevToolsHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+
 type Props = $ReadOnly<{|
   children?: React.Node,
   fabric?: boolean,
@@ -45,9 +47,17 @@ class AppContainer extends React.Component<Props, State> {
   };
   _mainRef: ?React.ElementRef<typeof View>;
   _subscription: ?EventSubscription = null;
+  _reactDevToolsAgentListener: ?() => void = null;
 
   static getDerivedStateFromError: any = undefined;
 
+  mountReactDevToolsOverlays(): void {
+    const DevtoolsOverlay = require('../Inspector/DevtoolsOverlay').default;
+    const devtoolsOverlay = <DevtoolsOverlay inspectedView={this._mainRef} />;
+
+    this.setState({devtoolsOverlay});
+  }
+
   componentDidMount(): void {
     if (__DEV__) {
       if (!this.props.internal_excludeInspector) {
@@ -69,13 +79,21 @@ class AppContainer extends React.Component<Props, State> {
             this.setState({inspector});
           },
         );
-        if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__ != null) {
-          const DevtoolsOverlay =
-            require('../Inspector/DevtoolsOverlay').default;
-          const devtoolsOverlay = (
-            <DevtoolsOverlay inspectedView={this._mainRef} />
+
+        if (reactDevToolsHook != null) {
+          if (reactDevToolsHook.reactDevtoolsAgent) {
+            // In case if this is not the first AppContainer rendered and React DevTools are already attached
+            this.mountReactDevToolsOverlays();
+            return;
+          }
+
+          this._reactDevToolsAgentListener = () =>
+            this.mountReactDevToolsOverlays();
+
+          reactDevToolsHook.on(
+            'react-devtools',
+            this._reactDevToolsAgentListener,
           );
-          this.setState({devtoolsOverlay});
         }
       }
     }
@@ -85,6 +103,10 @@ class AppContainer extends React.Component<Props, State> {
     if (this._subscription != null) {
       this._subscription.remove();
     }
+
+    if (reactDevToolsHook != null && this._reactDevToolsAgentListener != null) {
+      reactDevToolsHook.off('react-devtools', this._reactDevToolsAgentListener);
+    }
   }
 
   render(): React.Node {