From 353c30252f67145fa8241b6979d570cb152c2b22 Mon Sep 17 00:00:00 2001 From: Samuel Susla Date: Fri, 2 Dec 2022 15:53:55 +0000 Subject: [PATCH] Hold host functions in var (#25741) Calling any function on `nativeFabricUIManager`, for example `nativeFabricUIManager.measure`, results in a round trip to the host platform through jsi layer. It is the same for repeated calls to same host function. This is unnecessary overload which can be avoided by retaining host function in a variable. --- packages/react-native-renderer/src/ReactFabric.js | 9 +++++++-- .../src/ReactFabricGlobalResponderHandler.js | 6 ++++-- .../src/ReactNativeFiberInspector.js | 8 +++++--- .../react-native-renderer/src/ReactNativeRenderer.js | 9 +++++++-- .../src/__tests__/ReactNativeError-test.internal.js | 2 ++ .../src/__tests__/ReactNativeEvents-test.internal.js | 2 ++ .../src/__tests__/ReactNativeMount-test.internal.js | 2 ++ .../createReactNativeComponentClass-test.internal.js | 2 ++ 8 files changed, 31 insertions(+), 9 deletions(-) diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js index 1e3d299ece9e8..4ec730a3f9a5e 100644 --- a/packages/react-native-renderer/src/ReactFabric.js +++ b/packages/react-native-renderer/src/ReactFabric.js @@ -44,6 +44,11 @@ import {LegacyRoot, ConcurrentRoot} from 'react-reconciler/src/ReactRootTags'; import ReactSharedInternals from 'shared/ReactSharedInternals'; import getComponentNameFromType from 'shared/getComponentNameFromType'; +const { + dispatchCommand: fabricDispatchCommand, + sendAccessibilityEvent: fabricSendAccessibilityEvent, +} = nativeFabricUIManager; + const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; function findHostInstance_DEPRECATED( @@ -168,7 +173,7 @@ function dispatchCommand(handle: any, command: string, args: Array) { if (handle._internalInstanceHandle != null) { const {stateNode} = handle._internalInstanceHandle; if (stateNode != null) { - nativeFabricUIManager.dispatchCommand(stateNode.node, command, args); + fabricDispatchCommand(stateNode.node, command, args); } } else { UIManager.dispatchViewManagerCommand(handle._nativeTag, command, args); @@ -189,7 +194,7 @@ function sendAccessibilityEvent(handle: any, eventType: string) { if (handle._internalInstanceHandle != null) { const {stateNode} = handle._internalInstanceHandle; if (stateNode != null) { - nativeFabricUIManager.sendAccessibilityEvent(stateNode.node, eventType); + fabricSendAccessibilityEvent(stateNode.node, eventType); } } else { legacySendAccessibilityEvent(handle._nativeTag, eventType); diff --git a/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js b/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js index c4c6eaa22a483..579c8de687387 100644 --- a/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js +++ b/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js @@ -10,6 +10,8 @@ // Module provided by RN: import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface'; +const {setIsJSResponder} = nativeFabricUIManager; + const ReactFabricGlobalResponderHandler = { onChange: function(from: any, to: any, blockNativeResponder: boolean) { const fromOrTo = from || to; @@ -21,7 +23,7 @@ const ReactFabricGlobalResponderHandler = { if (isFabric) { if (from) { // equivalent to clearJSResponder - nativeFabricUIManager.setIsJSResponder( + setIsJSResponder( from.stateNode.node, false, blockNativeResponder || false, @@ -30,7 +32,7 @@ const ReactFabricGlobalResponderHandler = { if (to) { // equivalent to setJSResponder - nativeFabricUIManager.setIsJSResponder( + setIsJSResponder( to.stateNode.node, true, blockNativeResponder || false, diff --git a/packages/react-native-renderer/src/ReactNativeFiberInspector.js b/packages/react-native-renderer/src/ReactNativeFiberInspector.js index 4bc374bc772e4..14545550647dd 100644 --- a/packages/react-native-renderer/src/ReactNativeFiberInspector.js +++ b/packages/react-native-renderer/src/ReactNativeFiberInspector.js @@ -26,6 +26,8 @@ if (__DEV__) { Object.freeze(emptyObject); } +const {measure, findNodeAtPoint} = nativeFabricUIManager; + let createHierarchy; let getHostNode; let getHostProps; @@ -53,7 +55,7 @@ if (__DEV__ || enableGetInspectorDataForInstanceInProduction) { hostFiber.stateNode.node; if (shadowNode) { - nativeFabricUIManager.measure(shadowNode, callback); + measure(shadowNode, callback); } else { return UIManager.measure( getHostNode(fiber, findNodeHandle), @@ -195,7 +197,7 @@ if (__DEV__) { if (inspectedView._internalInstanceHandle != null) { // For Fabric we can look up the instance handle directly and measure it. - nativeFabricUIManager.findNodeAtPoint( + findNodeAtPoint( inspectedView._internalInstanceHandle.stateNode.node, locationX, locationY, @@ -215,7 +217,7 @@ if (__DEV__) { const nativeViewTag = internalInstanceHandle.stateNode.canonical._nativeTag; - nativeFabricUIManager.measure( + measure( internalInstanceHandle.stateNode.node, (x, y, width, height, pageX, pageY) => { const inspectorData = getInspectorDataForInstance( diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js index d9577a6eb6d58..85e8a1436a9f4 100644 --- a/packages/react-native-renderer/src/ReactNativeRenderer.js +++ b/packages/react-native-renderer/src/ReactNativeRenderer.js @@ -49,6 +49,11 @@ import getComponentNameFromType from 'shared/getComponentNameFromType'; const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; +const { + sendAccessibilityEvent: fabricSendAccessibilityEvent, + dispatchCommand: fabricDispatchCommand, +} = nativeFabricUIManager; + function findHostInstance_DEPRECATED( componentOrHandle: any, ): ?React$ElementRef> { @@ -165,7 +170,7 @@ function dispatchCommand(handle: any, command: string, args: Array) { if (handle._internalInstanceHandle != null) { const {stateNode} = handle._internalInstanceHandle; if (stateNode != null) { - nativeFabricUIManager.dispatchCommand(stateNode.node, command, args); + fabricDispatchCommand(stateNode.node, command, args); } } else { UIManager.dispatchViewManagerCommand(handle._nativeTag, command, args); @@ -186,7 +191,7 @@ function sendAccessibilityEvent(handle: any, eventType: string) { if (handle._internalInstanceHandle != null) { const {stateNode} = handle._internalInstanceHandle; if (stateNode != null) { - nativeFabricUIManager.sendAccessibilityEvent(stateNode.node, eventType); + fabricSendAccessibilityEvent(stateNode.node, eventType); } } else { legacySendAccessibilityEvent(handle._nativeTag, eventType); diff --git a/packages/react-native-renderer/src/__tests__/ReactNativeError-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactNativeError-test.internal.js index 447ce2ac2ebbb..0b55cd79b3d64 100644 --- a/packages/react-native-renderer/src/__tests__/ReactNativeError-test.internal.js +++ b/packages/react-native-renderer/src/__tests__/ReactNativeError-test.internal.js @@ -28,6 +28,8 @@ describe('ReactNativeError', () => { beforeEach(() => { jest.resetModules(); + require('react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager'); + React = require('react'); ReactNative = require('react-native-renderer'); createReactNativeComponentClass = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface') diff --git a/packages/react-native-renderer/src/__tests__/ReactNativeEvents-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactNativeEvents-test.internal.js index 2ebb2bcdc82cc..5e0524fbfc08d 100644 --- a/packages/react-native-renderer/src/__tests__/ReactNativeEvents-test.internal.js +++ b/packages/react-native-renderer/src/__tests__/ReactNativeEvents-test.internal.js @@ -63,6 +63,8 @@ const fakeRequireNativeComponent = (uiViewClassName, validAttributes) => { beforeEach(() => { jest.resetModules(); + require('react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager'); + PropTypes = require('prop-types'); RCTEventEmitter = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface') .RCTEventEmitter; diff --git a/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js index 02482c2028b38..c16a74c475b5f 100644 --- a/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js +++ b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js @@ -30,6 +30,8 @@ describe('ReactNative', () => { beforeEach(() => { jest.resetModules(); + require('react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager'); + React = require('react'); StrictMode = React.StrictMode; ReactNative = require('react-native-renderer'); diff --git a/packages/react-native-renderer/src/__tests__/createReactNativeComponentClass-test.internal.js b/packages/react-native-renderer/src/__tests__/createReactNativeComponentClass-test.internal.js index d7a15a8c8dd62..0bef8a2dc4499 100644 --- a/packages/react-native-renderer/src/__tests__/createReactNativeComponentClass-test.internal.js +++ b/packages/react-native-renderer/src/__tests__/createReactNativeComponentClass-test.internal.js @@ -18,6 +18,8 @@ describe('createReactNativeComponentClass', () => { beforeEach(() => { jest.resetModules(); + require('react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager'); + createReactNativeComponentClass = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface') .ReactNativeViewConfigRegistry.register; React = require('react');