Double-render functions in strict mode

Author: gaearon

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -250,6 +250,20 @@ function updateForwardRef(
       ref,
       renderExpirationTime,
     );
+    if (
+      debugRenderPhaseSideEffects ||
+      (debugRenderPhaseSideEffectsForStrictMode &&
+        workInProgress.mode & StrictMode)
+    ) {
+      renderWithHooks(
+        current,
+        workInProgress,
+        render,
+        nextProps,
+        ref,
+        renderExpirationTime,
+      );
+    }
     setCurrentPhase(null);
   } else {
     nextChildren = renderWithHooks(
@@ -543,6 +557,20 @@ function updateFunctionComponent(
       context,
       renderExpirationTime,
     );
+    if (
+      debugRenderPhaseSideEffects ||
+      (debugRenderPhaseSideEffectsForStrictMode &&
+        workInProgress.mode & StrictMode)
+    ) {
+      renderWithHooks(
+        current,
+        workInProgress,
+        Component,
+        nextProps,
+        context,
+        renderExpirationTime,
+      );
+    }
     setCurrentPhase(null);
   } else {
     nextChildren = renderWithHooks(
@@ -1145,6 +1173,7 @@ function mountIndeterminateComponent(
       context,
       renderExpirationTime,
     );
+    // TODO: double-render here in strict mode.
   } else {
     value = renderWithHooks(
       null,

packages/react-reconciler/src/__tests__/ErrorBoundaryReconciliation-test.internal.js

@@ -70,7 +70,7 @@ describe('ErrorBoundaryReconciliation', () => {
         if (isConcurrent) {
           renderer.unstable_flushAll();
         }
-      }).toWarnDev(isConcurrent ? ['invalid', 'invalid'] : ['invalid']);
+      }).toWarnDev(isConcurrent ? ['invalid', 'invalid', 'invalid', 'invalid'] : ['invalid']);
       const Fallback = fallbackTagName;
       expect(renderer).toMatchRenderedOutput(<Fallback prop="ErrorBoundary" />);
     }

packages/react-test-renderer/src/__tests__/ReactTestRendererAsync-test.js

@@ -66,7 +66,14 @@ describe('ReactTestRendererAsync', () => {
     expect(renderer.toJSON()).toEqual(['A:1', 'B:1', 'C:1']);
 
     renderer.update(<Parent step={2} />);
-    expect(renderer).toFlushAndYield(['A:2', 'B:2', 'C:2']);
+    expect(renderer).toFlushAndYield(__DEV__ ? [
+      'A:2',
+      'A:2',
+      'B:2',
+      'B:2',
+      'C:2',
+      'C:2'
+    ] : ['A:2', 'B:2', 'C:2']);
     expect(renderer.toJSON()).toEqual(['A:2', 'B:2', 'C:2']);
   });
 

packages/react/src/__tests__/forwardRef-test.js

@@ -241,11 +241,11 @@ describe('forwardRef', () => {
 
     ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />);
     ReactNoop.flush();
-    expect(renderCount).toBe(1);
+    expect(renderCount).toBe(__DEV__ ? 2 : 1);
 
     ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />);
     ReactNoop.flush();
-    expect(renderCount).toBe(2);
+    expect(renderCount).toBe(__DEV__ ? 4 : 2);
   });
 
   it('should bailout if forwardRef is wrapped in memo', () => {
@@ -264,28 +264,28 @@ describe('forwardRef', () => {
 
     ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />);
     ReactNoop.flush();
-    expect(renderCount).toBe(1);
+    expect(renderCount).toBe(__DEV__ ? 2 : 1);
 
     expect(ref.current.type).toBe('div');
 
     ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />);
     ReactNoop.flush();
-    expect(renderCount).toBe(1);
+    expect(renderCount).toBe(__DEV__ ? 2 : 1);
 
     const differentRef = React.createRef();
 
     ReactNoop.render(
       <RefForwardingComponent ref={differentRef} optional="foo" />,
     );
     ReactNoop.flush();
-    expect(renderCount).toBe(2);
+    expect(renderCount).toBe(__DEV__ ? 4 : 2);
 
     expect(ref.current).toBe(null);
     expect(differentRef.current.type).toBe('div');
 
     ReactNoop.render(<RefForwardingComponent ref={ref} optional="bar" />);
     ReactNoop.flush();
-    expect(renderCount).toBe(3);
+    expect(renderCount).toBe(__DEV__ ? 6 : 3);
   });
 
   it('should custom memo comparisons to compose', () => {
@@ -305,19 +305,19 @@ describe('forwardRef', () => {
 
     ReactNoop.render(<RefForwardingComponent ref={ref} a="0" b="0" c="1" />);
     ReactNoop.flush();
-    expect(renderCount).toBe(1);
+    expect(renderCount).toBe(__DEV__ ? 2 : 1);
 
     expect(ref.current.type).toBe('div');
 
     // Changing either a or b rerenders
     ReactNoop.render(<RefForwardingComponent ref={ref} a="0" b="1" c="1" />);
     ReactNoop.flush();
-    expect(renderCount).toBe(2);
+    expect(renderCount).toBe(__DEV__ ? 4 : 2);
 
     // Changing c doesn't rerender
     ReactNoop.render(<RefForwardingComponent ref={ref} a="0" b="1" c="2" />);
     ReactNoop.flush();
-    expect(renderCount).toBe(2);
+    expect(renderCount).toBe(__DEV__ ? 4 : 2);
 
     const ComposedMemo = React.memo(
       RefForwardingComponent,
@@ -326,29 +326,29 @@ describe('forwardRef', () => {
 
     ReactNoop.render(<ComposedMemo ref={ref} a="0" b="0" c="0" />);
     ReactNoop.flush();
-    expect(renderCount).toBe(3);
+    expect(renderCount).toBe(__DEV__ ? 6 : 3);
 
     // Changing just b no longer updates
     ReactNoop.render(<ComposedMemo ref={ref} a="0" b="1" c="0" />);
     ReactNoop.flush();
-    expect(renderCount).toBe(3);
+    expect(renderCount).toBe(__DEV__ ? 6 : 3);
 
     // Changing just a and c updates
     ReactNoop.render(<ComposedMemo ref={ref} a="2" b="2" c="2" />);
     ReactNoop.flush();
-    expect(renderCount).toBe(4);
+    expect(renderCount).toBe(__DEV__ ? 8 : 4);
 
     // Changing just c does not update
     ReactNoop.render(<ComposedMemo ref={ref} a="2" b="2" c="3" />);
     ReactNoop.flush();
-    expect(renderCount).toBe(4);
+    expect(renderCount).toBe(__DEV__ ? 8 : 4);
 
     // Changing ref still rerenders
     const differentRef = React.createRef();
 
     ReactNoop.render(<ComposedMemo ref={differentRef} a="2" b="2" c="3" />);
     ReactNoop.flush();
-    expect(renderCount).toBe(5);
+    expect(renderCount).toBe(__DEV__ ? 10 : 5);
 
     expect(ref.current).toBe(null);
     expect(differentRef.current.type).toBe('div');