Dont call memo comparison function on initial render

facebook · Mar 15, 2019 · 0dbe1fd · 0dbe1fd
1 parent 75dcd59
commit 0dbe1fd
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/packages/react-test-renderer/src/ReactShallowRenderer.js b/packages/react-test-renderer/src/ReactShallowRenderer.js
@@ -576,7 +576,8 @@ class ReactShallowRenderer {
         let shouldRender = true;
         if (
           isMemo(element.type) &&
-          elementType === this._previousComponentIdentity
+          elementType === this._previousComponentIdentity &&
+          previousElement !== null
         ) {
           // This is a Memo component that is being re-rendered.
           const compare = element.type.compare || shallowEqual;

diff --git a/packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js b/packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js
@@ -1510,6 +1510,17 @@ describe('ReactShallowRenderer', () => {
     expect(renderCount).toBe(2);
   });
 
+  it('should not call the comparison function with React.memo on the initial render', () => {
+    const areEqual = jest.fn(() => false);
+    const SomeComponent = React.memo(({foo}) => {
+      return <div>{foo}</div>;
+    }, areEqual);
+    const shallowRenderer = createRenderer();
+    shallowRenderer.render(<SomeComponent foo={1} />);
+    expect(areEqual).not.toHaveBeenCalled();
+    expect(shallowRenderer.getRenderOutput()).toEqual(<div>1</div>);
+  });
+
   it('should handle memo(forwardRef())', () => {
     const testRef = React.createRef();
     const SomeComponent = React.forwardRef((props, ref) => {