{"body":"","commit":{"subject":"Fix `ReactFabricHostComponent` methods if detached (#21967)","authorEmail":"yungsters@fb.com","revision":"d4d7864934025232e8bca5d2febec846ec1bd6e3","shortRevision":"d4d7864934","authorName":"Timothy Yung","authoredAt":"2021-07-26T21:02:06-07:00"},"patch":"diff --git a\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js b\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\nindex 39058e9ac5..ac7fb64d92 100644\n--- a\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\n+++ b\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\n@@ -137,17 +137,23 @@ class ReactFabricHostComponent {\n }\n \n measure(callback: MeasureOnSuccessCallback) {\n- fabricMeasure(\n- this._internalInstanceHandle.stateNode.node,\n- mountSafeCallback_NOT_REALLY_SAFE(this, callback),\n- );\n+ const {stateNode} = this._internalInstanceHandle;\n+ if (stateNode != null) {\n+ fabricMeasure(\n+ stateNode.node,\n+ mountSafeCallback_NOT_REALLY_SAFE(this, callback),\n+ );\n+ }\n }\n \n measureInWindow(callback: MeasureInWindowOnSuccessCallback) {\n- fabricMeasureInWindow(\n- this._internalInstanceHandle.stateNode.node,\n- mountSafeCallback_NOT_REALLY_SAFE(this, callback),\n- );\n+ const {stateNode} = this._internalInstanceHandle;\n+ if (stateNode != null) {\n+ fabricMeasureInWindow(\n+ stateNode.node,\n+ mountSafeCallback_NOT_REALLY_SAFE(this, callback),\n+ );\n+ }\n }\n \n measureLayout(\n@@ -168,12 +174,18 @@ class ReactFabricHostComponent {\n return;\n }\n \n- fabricMeasureLayout(\n- this._internalInstanceHandle.stateNode.node,\n- relativeToNativeNode._internalInstanceHandle.stateNode.node,\n- mountSafeCallback_NOT_REALLY_SAFE(this, onFail),\n- mountSafeCallback_NOT_REALLY_SAFE(this, onSuccess),\n- );\n+ const toStateNode = this._internalInstanceHandle.stateNode;\n+ const fromStateNode =\n+ relativeToNativeNode._internalInstanceHandle.stateNode;\n+\n+ if (toStateNode != null && fromStateNode != null) {\n+ fabricMeasureLayout(\n+ toStateNode.node,\n+ fromStateNode.node,\n+ mountSafeCallback_NOT_REALLY_SAFE(this, onFail),\n+ mountSafeCallback_NOT_REALLY_SAFE(this, onSuccess),\n+ );\n+ }\n }\n \n setNativeProps(nativeProps: Object) {\ndiff --git a\/packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js b\/packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js\nindex 6b776c085f..ebe763af02 100644\n--- a\/packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js\n+++ b\/packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js\n@@ -414,6 +414,37 @@ describe('ReactFabric', () => {\n expect(successCallback).toHaveBeenCalledWith(10, 10, 100, 100, 0, 0);\n });\n \n+ it('should no-op if calling measure on unmounted refs', () => {\n+ const View = createReactNativeComponentClass('RCTView', () => ({\n+ validAttributes: {foo: true},\n+ uiViewClassName: 'RCTView',\n+ }));\n+\n+ nativeFabricUIManager.measure.mockClear();\n+\n+ let viewRef;\n+ act(() => {\n+ ReactFabric.render(\n+ {\n+ viewRef = ref;\n+ }}\n+ \/>,\n+ 11,\n+ );\n+ });\n+ const dangerouslyRetainedViewRef = viewRef;\n+ act(() => {\n+ ReactFabric.stopSurface(11);\n+ });\n+\n+ expect(nativeFabricUIManager.measure).not.toBeCalled();\n+ const successCallback = jest.fn();\n+ dangerouslyRetainedViewRef.measure(successCallback);\n+ expect(nativeFabricUIManager.measure).not.toBeCalled();\n+ expect(successCallback).not.toBeCalled();\n+ });\n+\n it('should call FabricUIManager.measureInWindow on ref.measureInWindow', () => {\n const View = createReactNativeComponentClass('RCTView', () => ({\n validAttributes: {foo: true},\n@@ -442,6 +473,37 @@ describe('ReactFabric', () => {\n expect(successCallback).toHaveBeenCalledWith(10, 10, 100, 100);\n });\n \n+ it('should no-op if calling measureInWindow on unmounted refs', () => {\n+ const View = createReactNativeComponentClass('RCTView', () => ({\n+ validAttributes: {foo: true},\n+ uiViewClassName: 'RCTView',\n+ }));\n+\n+ nativeFabricUIManager.measureInWindow.mockClear();\n+\n+ let viewRef;\n+ act(() => {\n+ ReactFabric.render(\n+ {\n+ viewRef = ref;\n+ }}\n+ \/>,\n+ 11,\n+ );\n+ });\n+ const dangerouslyRetainedViewRef = viewRef;\n+ act(() => {\n+ ReactFabric.stopSurface(11);\n+ });\n+\n+ expect(nativeFabricUIManager.measureInWindow).not.toBeCalled();\n+ const successCallback = jest.fn();\n+ dangerouslyRetainedViewRef.measureInWindow(successCallback);\n+ expect(nativeFabricUIManager.measureInWindow).not.toBeCalled();\n+ expect(successCallback).not.toBeCalled();\n+ });\n+\n it('should support ref in ref.measureLayout', () => {\n const View = createReactNativeComponentClass('RCTView', () => ({\n validAttributes: {foo: true},\n@@ -480,6 +542,119 @@ describe('ReactFabric', () => {\n expect(successCallback).toHaveBeenCalledWith(1, 1, 100, 100);\n });\n \n+ it('should no-op if calling measureLayout on unmounted \"from\" ref', () => {\n+ const View = createReactNativeComponentClass('RCTView', () => ({\n+ validAttributes: {foo: true},\n+ uiViewClassName: 'RCTView',\n+ }));\n+\n+ nativeFabricUIManager.measureLayout.mockClear();\n+\n+ let viewRef;\n+ let otherRef;\n+ act(() => {\n+ ReactFabric.render(\n+ \n+ {\n+ viewRef = ref;\n+ }}\n+ \/>\n+ {\n+ otherRef = ref;\n+ }}\n+ \/>\n+ <\/View>,\n+ 11,\n+ );\n+ });\n+ const dangerouslyRetainedOtherRef = otherRef;\n+ act(() => {\n+ ReactFabric.render(\n+ \n+ {\n+ viewRef = ref;\n+ }}\n+ \/>\n+ {null}\n+ <\/View>,\n+ 11,\n+ );\n+ });\n+\n+ expect(nativeFabricUIManager.measureLayout).not.toBeCalled();\n+ const successCallback = jest.fn();\n+ const failureCallback = jest.fn();\n+ viewRef.measureLayout(\n+ dangerouslyRetainedOtherRef,\n+ successCallback,\n+ failureCallback,\n+ );\n+ expect(nativeFabricUIManager.measureLayout).not.toBeCalled();\n+ expect(successCallback).not.toBeCalled();\n+ expect(failureCallback).not.toBeCalled();\n+ });\n+\n+ it('should no-op if calling measureLayout on unmounted \"to\" ref', () => {\n+ const View = createReactNativeComponentClass('RCTView', () => ({\n+ validAttributes: {foo: true},\n+ uiViewClassName: 'RCTView',\n+ }));\n+\n+ nativeFabricUIManager.measureLayout.mockClear();\n+\n+ let viewRef;\n+ let otherRef;\n+ act(() => {\n+ ReactFabric.render(\n+ \n+ {\n+ viewRef = ref;\n+ }}\n+ \/>\n+ {\n+ otherRef = ref;\n+ }}\n+ \/>\n+ <\/View>,\n+ 11,\n+ );\n+ });\n+ const dangerouslyRetainedViewRef = viewRef;\n+ act(() => {\n+ ReactFabric.render(\n+ \n+ {null}\n+ {\n+ otherRef = ref;\n+ }}\n+ \/>\n+ <\/View>,\n+ 11,\n+ );\n+ });\n+\n+ expect(nativeFabricUIManager.measureLayout).not.toBeCalled();\n+ const successCallback = jest.fn();\n+ const failureCallback = jest.fn();\n+ dangerouslyRetainedViewRef.measureLayout(\n+ otherRef,\n+ successCallback,\n+ failureCallback,\n+ );\n+ expect(nativeFabricUIManager.measureLayout).not.toBeCalled();\n+ expect(successCallback).not.toBeCalled();\n+ expect(failureCallback).not.toBeCalled();\n+ });\n+\n it('returns the correct instance and calls it in the callback', () => {\n const View = createReactNativeComponentClass('RCTView', () => ({\n validAttributes: {foo: true},\n","files":[{"status":"M","path":"packages\/react-native-renderer\/src\/ReactFabricHostConfig.js"},{"status":"M","path":"packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js"}],"parents":["c21e8fccadc0e0351bc45c2df729c92807a647ef"]}

dillon1000/react

Files changed