From b71bb817186a839f7881fded6be5c6f92fa2d1a6 Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin Date: Thu, 23 Nov 2023 07:53:24 -0800 Subject: [PATCH] refactor[AppContainer]: remove innerView ref from state (#41613) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/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 --- .../Libraries/Inspector/Inspector.js | 7 ++-- .../Inspector/ReactDevToolsOverlay.js | 42 ++++++++++--------- .../Libraries/ReactNative/AppContainer-dev.js | 17 ++++---- 3 files changed, 33 insertions(+), 33 deletions(-) diff --git a/packages/react-native/Libraries/Inspector/Inspector.js b/packages/react-native/Libraries/Inspector/Inspector.js index f22c5457756b5a..dc274521388903 100644 --- 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 | 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 index 04959ca766e6c3..cca9e7e8b7dc88 100644 --- 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 | null>, reactDevToolsAgent: ReactDevToolsAgent, }; export default function ReactDevToolsOverlay({ - inspectedView, + inspectedViewRef, reactDevToolsAgent, }: Props): React.Node { const [inspected, setInspected] = useState(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 index 4e7f2c43e6b077..3e4fe8389610e7 100644 --- 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 | null, + inspectedViewRef: React.RefObject | null>, onInspectedViewRerenderRequest: () => void, reactDevToolsAgent?: ReactDevToolsAgent, }; const InspectorDeferred = ({ - inspectedView, + inspectedViewRef, onInspectedViewRerenderRequest, reactDevToolsAgent, }: InspectorDeferredProps) => { @@ -57,7 +56,7 @@ const InspectorDeferred = ({ return ( @@ -74,9 +73,7 @@ const AppContainer = ({ showArchitectureIndicator, WrapperComponent, }: Props): React.Node => { - const [mainRef, setMainRef] = useState | null>(null); + const innerViewRef = React.useRef | 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} ); @@ -149,14 +146,14 @@ const AppContainer = ({ )} {reactDevToolsAgent != null && ( )} {shouldRenderInspector && (