refactor[AppContainer]: remove innerView ref from state (#41613)

Summary: Pull Request resolved: #41613 Changelog: [Internal] We were keeping ref in the AppContainer's state before migrating these components to functions. We actually need a real ref here, so we can use `useImperativeHandle` on it later. These refs will be passed as an argument for DebuggingRegistry subscription, whichi will call them on all necessary AppContainers to highlight required components. Reviewed By: javache Differential Revision: D51536772 fbshipit-source-id: d49035874ce3c9b1acf08d5ab666886f68e6f40e
facebook · Nov 23, 2023 · b71bb81 · b71bb81
1 parent ed1056e
commit b71bb81
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 33 deletions.
diff --git a/packages/react-native/Libraries/Inspector/Inspector.js b/packages/react-native/Libraries/Inspector/Inspector.js
@@ -16,7 +16,6 @@ import type {
 } from '../Renderer/shims/ReactNativeTypes';
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {ReactDevToolsAgent} from '../Types/ReactDevToolsTypes';
-import type {HostRef} from './getInspectorDataForViewAtPoint';
 
 const View = require('../Components/View/View');
 const PressabilityDebug = require('../Pressability/PressabilityDebug');
@@ -47,13 +46,13 @@ export type InspectedElement = $ReadOnly<{
 export type ElementsHierarchy = InspectorData['hierarchy'];
 
 type Props = {
-  inspectedView: ?HostRef,
+  inspectedViewRef: React.RefObject<React.ElementRef<typeof View> | null>,
   onRequestRerenderApp: () => void,
   reactDevToolsAgent?: ReactDevToolsAgent,
 };
 
 function Inspector({
-  inspectedView,
+  inspectedViewRef,
   onRequestRerenderApp,
   reactDevToolsAgent,
 }: Props): React.Node {
@@ -126,7 +125,7 @@ function Inspector({
     };
 
     getInspectorDataForViewAtPoint(
-      inspectedView,
+      inspectedViewRef.current,
       locationX,
       locationY,
       viewData => {

diff --git a/packages/react-native/Libraries/Inspector/ReactDevToolsOverlay.js b/packages/react-native/Libraries/Inspector/ReactDevToolsOverlay.js
@@ -14,7 +14,6 @@ import type {
   InstanceFromReactDevTools,
   ReactDevToolsAgent,
 } from '../Types/ReactDevToolsTypes';
-import type {HostRef} from './getInspectorDataForViewAtPoint';
 import type {InspectedElement} from './Inspector';
 
 import View from '../Components/View/View';
@@ -30,12 +29,12 @@ const getInspectorDataForViewAtPoint = require('./getInspectorDataForViewAtPoint
 const {useEffect, useState, useCallback} = React;
 
 type Props = {
-  inspectedView: ?HostRef,
+  inspectedViewRef: React.RefObject<React.ElementRef<typeof View> | null>,
   reactDevToolsAgent: ReactDevToolsAgent,
 };
 
 export default function ReactDevToolsOverlay({
-  inspectedView,
+  inspectedViewRef,
   reactDevToolsAgent,
 }: Props): React.Node {
   const [inspected, setInspected] = useState<?InspectedElement>(null);
@@ -125,24 +124,29 @@ export default function ReactDevToolsOverlay({
 
   const findViewForLocation = useCallback(
     (x: number, y: number) => {
-      getInspectorDataForViewAtPoint(inspectedView, x, y, viewData => {
-        const {touchedViewTag, closestInstance, frame} = viewData;
-        if (closestInstance != null || touchedViewTag != null) {
-          // We call `selectNode` for both non-fabric(viewTag) and fabric(instance),
-          // this makes sure it works for both architectures.
-          reactDevToolsAgent.selectNode(findNodeHandle(touchedViewTag));
-          if (closestInstance != null) {
-            reactDevToolsAgent.selectNode(closestInstance);
+      getInspectorDataForViewAtPoint(
+        inspectedViewRef.current,
+        x,
+        y,
+        viewData => {
+          const {touchedViewTag, closestInstance, frame} = viewData;
+          if (closestInstance != null || touchedViewTag != null) {
+            // We call `selectNode` for both non-fabric(viewTag) and fabric(instance),
+            // this makes sure it works for both architectures.
+            reactDevToolsAgent.selectNode(findNodeHandle(touchedViewTag));
+            if (closestInstance != null) {
+              reactDevToolsAgent.selectNode(closestInstance);
+            }
+            setInspected({
+              frame,
+            });
+            return true;
           }
-          setInspected({
-            frame,
-          });
-          return true;
-        }
-        return false;
-      });
+          return false;
+        },
+      );
     },
-    [inspectedView, reactDevToolsAgent],
+    [inspectedViewRef, reactDevToolsAgent],
   );
 
   const stopInspecting = useCallback(() => {

diff --git a/packages/react-native/Libraries/ReactNative/AppContainer-dev.js b/packages/react-native/Libraries/ReactNative/AppContainer-dev.js
@@ -18,7 +18,6 @@ import type {Props} from './AppContainer';
 import TraceUpdateOverlay from '../Components/TraceUpdateOverlay/TraceUpdateOverlay';
 import ReactNativeStyleAttributes from '../Components/View/ReactNativeStyleAttributes';
 import View from '../Components/View/View';
-import ViewNativeComponent from '../Components/View/ViewNativeComponent';
 import RCTDeviceEventEmitter from '../EventEmitter/RCTDeviceEventEmitter';
 import ReactDevToolsOverlay from '../Inspector/ReactDevToolsOverlay';
 import LogBoxNotificationContainer from '../LogBox/LogBoxNotificationContainer';
@@ -41,13 +40,13 @@ if (reactDevToolsHook) {
 }
 
 type InspectorDeferredProps = {
-  inspectedView: React.ElementRef<typeof ViewNativeComponent> | null,
+  inspectedViewRef: React.RefObject<React.ElementRef<typeof View> | null>,
   onInspectedViewRerenderRequest: () => void,
   reactDevToolsAgent?: ReactDevToolsAgent,
 };
 
 const InspectorDeferred = ({
-  inspectedView,
+  inspectedViewRef,
   onInspectedViewRerenderRequest,
   reactDevToolsAgent,
 }: InspectorDeferredProps) => {
@@ -57,7 +56,7 @@ const InspectorDeferred = ({
 
   return (
     <Inspector
-      inspectedView={inspectedView}
+      inspectedViewRef={inspectedViewRef}
       onRequestRerenderApp={onInspectedViewRerenderRequest}
       reactDevToolsAgent={reactDevToolsAgent}
     />
@@ -74,9 +73,7 @@ const AppContainer = ({
   showArchitectureIndicator,
   WrapperComponent,
 }: Props): React.Node => {
-  const [mainRef, setMainRef] = useState<React.ElementRef<
-    typeof ViewNativeComponent,
-  > | null>(null);
+  const innerViewRef = React.useRef<React.ElementRef<typeof View> | null>(null);
 
   const [key, setKey] = useState(0);
   const [shouldRenderInspector, setShouldRenderInspector] = useState(false);
@@ -118,7 +115,7 @@ const AppContainer = ({
       pointerEvents="box-none"
       key={key}
       style={styles.container}
-      ref={setMainRef}>
+      ref={innerViewRef}>
       {children}
     </View>
   );
@@ -149,14 +146,14 @@ const AppContainer = ({
         )}
         {reactDevToolsAgent != null && (
           <ReactDevToolsOverlay
-            inspectedView={mainRef}
+            inspectedViewRef={innerViewRef}
             reactDevToolsAgent={reactDevToolsAgent}
           />
         )}
 
         {shouldRenderInspector && (
           <InspectorDeferred
-            inspectedView={mainRef}
+            inspectedViewRef={innerViewRef}
             onInspectedViewRerenderRequest={onInspectedViewRerenderRequest}
             reactDevToolsAgent={reactDevToolsAgent}
           />