diff --git a/packages/react-native-renderer/src/__mocks__/FabricUIManager.js b/packages/react-native-renderer/src/__mocks__/FabricUIManager.js index f4765c95ea58..7bfacbd50614 100644 --- a/packages/react-native-renderer/src/__mocks__/FabricUIManager.js +++ b/packages/react-native-renderer/src/__mocks__/FabricUIManager.js @@ -72,21 +72,21 @@ const RCTFabricUIManager = { }), cloneNodeWithNewProps: jest.fn(function cloneNodeWithNewProps( node, - newProps, + newPropsDiff, ) { return { reactTag: node.reactTag, viewName: node.viewName, - props: newProps, + props: {...node.props, ...newPropsDiff}, children: node.children, }; }), cloneNodeWithNewChildrenAndProps: jest.fn( - function cloneNodeWithNewChildrenAndProps(node, newProps) { + function cloneNodeWithNewChildrenAndProps(node, newPropsDiff) { return { reactTag: node.reactTag, viewName: node.viewName, - props: newProps, + props: {...node.props, ...newPropsDiff}, children: [], }; }, diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js index 8249904b5c03..a1736cff241e 100644 --- a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js +++ b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js @@ -109,6 +109,48 @@ describe('ReactFabric', () => { ).toBe(1); }); + it('should only pass props diffs to FabricUIManager.cloneNode', () => { + const View = createReactNativeComponentClass('View', () => ({ + validAttributes: {foo: true, bar: true}, + uiViewClassName: 'View', + })); + + ReactFabric.render( + + 1 + , + 11, + ); + expect(FabricUIManager.cloneNode).not.toBeCalled(); + expect(FabricUIManager.cloneNodeWithNewChildren).not.toBeCalled(); + expect(FabricUIManager.cloneNodeWithNewProps).not.toBeCalled(); + expect(FabricUIManager.cloneNodeWithNewChildrenAndProps).not.toBeCalled(); + + ReactFabric.render( + + 1 + , + 11, + ); + expect(FabricUIManager.cloneNodeWithNewProps.mock.calls[0][1]).toEqual({ + bar: 'b', + }); + expect(FabricUIManager.__dumpHierarchyForJestTestsOnly()).toMatchSnapshot(); + + ReactFabric.render( + + 2 + , + 11, + ); + expect( + FabricUIManager.cloneNodeWithNewChildrenAndProps.mock.calls[0][1], + ).toEqual({ + foo: 'b', + }); + expect(FabricUIManager.__dumpHierarchyForJestTestsOnly()).toMatchSnapshot(); + }); + it('should not call UIManager.updateView from setNativeProps for properties that have not changed', () => { const View = createReactNativeComponentClass('View', () => ({ validAttributes: {foo: true}, diff --git a/packages/react-native-renderer/src/__tests__/__snapshots__/ReactFabric-test.internal.js.snap b/packages/react-native-renderer/src/__tests__/__snapshots__/ReactFabric-test.internal.js.snap index 829b12c03a25..cd6ebcb99075 100644 --- a/packages/react-native-renderer/src/__tests__/__snapshots__/ReactFabric-test.internal.js.snap +++ b/packages/react-native-renderer/src/__tests__/__snapshots__/ReactFabric-test.internal.js.snap @@ -49,3 +49,15 @@ exports[`ReactFabric renders and reorders children 2`] = ` View {\\"title\\":\\"z\\"} View {\\"title\\":\\"y\\"}" `; + +exports[`ReactFabric should only pass props diffs to FabricUIManager.cloneNode 1`] = ` +"11 + View {\\"foo\\":\\"a\\",\\"bar\\":\\"b\\"} + RCTRawText {\\"text\\":\\"1\\"}" +`; + +exports[`ReactFabric should only pass props diffs to FabricUIManager.cloneNode 2`] = ` +"11 + View {\\"foo\\":\\"b\\",\\"bar\\":\\"b\\"} + RCTRawText {\\"text\\":\\"2\\"}" +`;