Fix use of stale props in Fabric events (#26408)

rubennorte · web-flow · commit 108aed083e6f · 2023-03-17T11:27:49.000Z
## Summary We had to revert the last React sync to React Native because we saw issues with Responder events using stale event handlers instead of recent versions. I reviewed the merged PRs and realized the problem was in the refactor I did in #26321. In that PR, we moved `currentProps` from `canonical`, which is a singleton referenced by all versions of the same fiber, to the fiber itself. This is causing the staleness we observed in events. This PR does a partial revert of the refactor in #26321, bringing back the `canonical` object but moving `publicInstance` to one of its fields, instead of being the `canonical` object itself. ## How did you test this change? Existing unit tests continue working (I didn't manage to get a repro using the test renderer). I manually tested this change in Meta infra and saw the problem was fixed.
diff --git a/packages/react-native-renderer/src/ReactFabricComponentTree.js b/packages/react-native-renderer/src/ReactFabricComponentTree.js
@@ -22,8 +22,11 @@ import {getPublicInstance} from './ReactFabricHostConfig';
 function getInstanceFromNode(node: Instance | TextInstance): Fiber | null {
   const instance: Instance = (node: $FlowFixMe); // In React Native, node is never a text instance
 
-  if (instance.internalInstanceHandle != null) {
-    return instance.internalInstanceHandle;
+  if (
+    instance.canonical != null &&
+    instance.canonical.internalInstanceHandle != null
+  ) {
+    return instance.canonical.internalInstanceHandle;
   }
 
   // $FlowFixMe[incompatible-return] DevTools incorrectly passes a fiber in React Native.
@@ -41,7 +44,7 @@ function getNodeFromInstance(fiber: Fiber): PublicInstance {
 }
 
 function getFiberCurrentPropsFromNode(instance: Instance): Props {
-  return instance.currentProps;
+  return instance.canonical.currentProps;
 }
 
 export {
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -55,13 +55,15 @@ export type Props = Object;
 export type Instance = {
   // Reference to the shadow node.
   node: Node,
-  nativeTag: number,
-  viewConfig: ViewConfig,
-  currentProps: Props,
-  // Reference to the React handle (the fiber)
-  internalInstanceHandle: Object,
-  // Exposed through refs.
-  publicInstance: ReactFabricHostComponent,
+  canonical: {
+    nativeTag: number,
+    viewConfig: ViewConfig,
+    currentProps: Props,
+    // Reference to the React handle (the fiber)
+    internalInstanceHandle: Object,
+    // Exposed through refs.
+    publicInstance: ReactFabricHostComponent,
+  },
 };
 export type TextInstance = {node: Node, ...};
 export type HydratableInstance = Instance | TextInstance;
@@ -148,11 +150,13 @@ export function createInstance(
 
   return {
     node: node,
-    nativeTag: tag,
-    viewConfig,
-    currentProps: props,
-    internalInstanceHandle,
-    publicInstance: component,
+    canonical: {
+      nativeTag: tag,
+      viewConfig,
+      currentProps: props,
+      internalInstanceHandle,
+      publicInstance: component,
+    },
   };
 }
 
@@ -222,8 +226,8 @@ export function getChildHostContext(
 }
 
 export function getPublicInstance(instance: Instance): null | PublicInstance {
-  if (instance.publicInstance != null) {
-    return instance.publicInstance;
+  if (instance.canonical != null && instance.canonical.publicInstance != null) {
+    return instance.canonical.publicInstance;
   }
 
   // For compatibility with the legacy renderer, in case it's used with Fabric
@@ -249,12 +253,12 @@ export function prepareUpdate(
   newProps: Props,
   hostContext: HostContext,
 ): null | Object {
-  const viewConfig = instance.viewConfig;
+  const viewConfig = instance.canonical.viewConfig;
   const updatePayload = diff(oldProps, newProps, viewConfig.validAttributes);
   // TODO: If the event handlers have changed, we need to update the current props
   // in the commit phase but there is no host config hook to do it yet.
   // So instead we hack it by updating it in the render phase.
-  instance.currentProps = newProps;
+  instance.canonical.currentProps = newProps;
   return updatePayload;
 }
 
@@ -333,11 +337,7 @@ export function cloneInstance(
   }
   return {
     node: clone,
-    nativeTag: instance.nativeTag,
-    viewConfig: instance.viewConfig,
-    currentProps: instance.currentProps,
-    internalInstanceHandle: instance.internalInstanceHandle,
-    publicInstance: instance.publicInstance,
+    canonical: instance.canonical,
   };
 }
 
@@ -347,19 +347,15 @@ export function cloneHiddenInstance(
   props: Props,
   internalInstanceHandle: Object,
 ): Instance {
-  const viewConfig = instance.viewConfig;
+  const viewConfig = instance.canonical.viewConfig;
   const node = instance.node;
   const updatePayload = create(
     {style: {display: 'none'}},
     viewConfig.validAttributes,
   );
   return {
     node: cloneNodeWithNewProps(node, updatePayload),
-    nativeTag: instance.nativeTag,
-    viewConfig: instance.viewConfig,
-    currentProps: instance.currentProps,
-    internalInstanceHandle: instance.internalInstanceHandle,
-    publicInstance: instance.publicInstance,
+    canonical: instance.canonical,
   };
 }
 
diff --git a/packages/react-native-renderer/src/ReactNativeComponentTree.js b/packages/react-native-renderer/src/ReactNativeComponentTree.js
@@ -24,10 +24,10 @@ function getInstanceFromTag(tag) {
 function getTagFromInstance(inst) {
   let nativeInstance = inst.stateNode;
   let tag = nativeInstance._nativeTag;
-  if (tag === undefined) {
+  if (tag === undefined && nativeInstance.canonical != null) {
     // For compatibility with Fabric
-    tag = nativeInstance.nativeTag;
-    nativeInstance = nativeInstance.publicInstance;
+    tag = nativeInstance.canonical.nativeTag;
+    nativeInstance = nativeInstance.canonical.publicInstance;
   }
 
   if (!tag) {
diff --git a/packages/react-native-renderer/src/ReactNativeFiberInspector.js b/packages/react-native-renderer/src/ReactNativeFiberInspector.js
@@ -223,10 +223,11 @@ function getInspectorDataForViewAtPoint(
           }
 
           closestInstance =
-            internalInstanceHandle.stateNode.internalInstanceHandle;
+            internalInstanceHandle.stateNode.canonical.internalInstanceHandle;
 
           // Note: this is deprecated and we want to remove it ASAP. Keeping it here for React DevTools compatibility for now.
-          const nativeViewTag = internalInstanceHandle.stateNode.nativeTag;
+          const nativeViewTag =
+            internalInstanceHandle.stateNode.canonical.nativeTag;
 
           nativeFabricUIManager.measure(
             node,
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -218,8 +218,8 @@ export function getChildHostContext(
 
 export function getPublicInstance(instance: Instance): * {
   // $FlowExpectedError[prop-missing] For compatibility with Fabric
-  if (instance.publicInstance != null) {
-    return instance.publicInstance;
+  if (instance.canonical != null && instance.canonical.publicInstance != null) {
+    return instance.canonical.publicInstance;
   }
 
   return instance;
diff --git a/packages/react-native-renderer/src/ReactNativePublicCompat.js b/packages/react-native-renderer/src/ReactNativePublicCompat.js
@@ -56,9 +56,12 @@ export function findHostInstance_DEPRECATED<TElementType: ElementType>(
   }
 
   // For compatibility with Fabric instances
-  if (componentOrHandle.publicInstance) {
+  if (
+    componentOrHandle.canonical &&
+    componentOrHandle.canonical.publicInstance
+  ) {
     // $FlowExpectedError[incompatible-return] Can't refine componentOrHandle as a Fabric instance
-    return componentOrHandle.publicInstance;
+    return componentOrHandle.canonical.publicInstance;
   }
 
   // For compatibility with legacy renderer instances
@@ -117,8 +120,11 @@ export function findNodeHandle(componentOrHandle: any): ?number {
   }
 
   // For compatibility with Fabric instances
-  if (componentOrHandle.nativeTag != null) {
-    return componentOrHandle.nativeTag;
+  if (
+    componentOrHandle.canonical != null &&
+    componentOrHandle.canonical.nativeTag != null
+  ) {
+    return componentOrHandle.canonical.nativeTag;
   }
 
   // For compatibility with Fabric public instances

Original file line number	Diff line number	Diff line change
`@@ -22,8 +22,11 @@ import {getPublicInstance} from './ReactFabricHostConfig';`
`22`	`22`	`function getInstanceFromNode(node: Instance \| TextInstance): Fiber \| null {`
`23`	`23`	`const instance: Instance = (node: $FlowFixMe); // In React Native, node is never a text instance`
`24`	`24`
`25`		`- if (instance.internalInstanceHandle != null) {`
`26`		`- return instance.internalInstanceHandle;`
	`25`	`+ if (`
	`26`	`+ instance.canonical != null &&`
	`27`	`+ instance.canonical.internalInstanceHandle != null`
	`28`	`+ ) {`
	`29`	`+ return instance.canonical.internalInstanceHandle;`
`27`	`30`	`}`
`28`	`31`
`29`	`32`	`// $FlowFixMe[incompatible-return] DevTools incorrectly passes a fiber in React Native.`
`@@ -41,7 +44,7 @@ function getNodeFromInstance(fiber: Fiber): PublicInstance {`
`41`	`44`	`}`
`42`	`45`
`43`	`46`	`function getFiberCurrentPropsFromNode(instance: Instance): Props {`
`44`		`- return instance.currentProps;`
	`47`	`+ return instance.canonical.currentProps;`
`45`	`48`	`}`
`46`	`49`
`47`	`50`	`export {`
Original file line number	Diff line number	Diff line change
`@@ -218,8 +218,8 @@ export function getChildHostContext(`
`218`	`218`
`219`	`219`	`export function getPublicInstance(instance: Instance): * {`
`220`	`220`	`// $FlowExpectedError[prop-missing] For compatibility with Fabric`
`221`		`- if (instance.publicInstance != null) {`
`222`		`- return instance.publicInstance;`
	`221`	`+ if (instance.canonical != null && instance.canonical.publicInstance != null) {`
	`222`	`+ return instance.canonical.publicInstance;`
`223`	`223`	`}`
`224`	`224`
`225`	`225`	`return instance;`
Original file line number	Diff line number	Diff line change
`@@ -56,9 +56,12 @@ export function findHostInstance_DEPRECATED<TElementType: ElementType>(`
`56`	`56`	`}`
`57`	`57`
`58`	`58`	`// For compatibility with Fabric instances`
`59`		`- if (componentOrHandle.publicInstance) {`
	`59`	`+ if (`
	`60`	`+ componentOrHandle.canonical &&`
	`61`	`+ componentOrHandle.canonical.publicInstance`
	`62`	`+ ) {`
`60`	`63`	`// $FlowExpectedError[incompatible-return] Can't refine componentOrHandle as a Fabric instance`
`61`		`- return componentOrHandle.publicInstance;`
	`64`	`+ return componentOrHandle.canonical.publicInstance;`
`62`	`65`	`}`
`63`	`66`
`64`	`67`	`// For compatibility with legacy renderer instances`
`@@ -117,8 +120,11 @@ export function findNodeHandle(componentOrHandle: any): ?number {`
`117`	`120`	`}`
`118`	`121`
`119`	`122`	`// For compatibility with Fabric instances`
`120`		`- if (componentOrHandle.nativeTag != null) {`
`121`		`- return componentOrHandle.nativeTag;`
	`123`	`+ if (`
	`124`	`+ componentOrHandle.canonical != null &&`
	`125`	`+ componentOrHandle.canonical.nativeTag != null`
	`126`	`+ ) {`
	`127`	`+ return componentOrHandle.canonical.nativeTag;`
`122`	`128`	`}`
`123`	`129`
`124`	`130`	`// For compatibility with Fabric public instances`