Add experimental getDerivedStateFromCatch lifecycle

Fires during the render phase, so you can recover from an error within the same
pass. This aligns error boundaries more closely with try-catch semantics.

Let's keep this behind a feature flag until a future release. For now, the
recommendation is to keep using componentDidCatch. Eventually, the advice will
be to use getDerivedStateFromCatch for handling errors and componentDidCatch
only for logging.

Author: acdlite

packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js

@@ -788,7 +788,7 @@ describe('ReactErrorBoundaries', () => {
     ]);
   });
 
-  xit('propagates errors on retry on mounting', () => {
+  it('propagates errors on retry on mounting', () => {
     const container = document.createElement('div');
     ReactDOM.render(
       <ErrorBoundary>

packages/react-dom/src/__tests__/ReactUpdates-test.js

@@ -1336,28 +1336,32 @@ describe('ReactUpdates', () => {
   });
 
   it('does not fall into an infinite error loop', () => {
-    class BadMount extends React.Component {
-      componentDidMount() {
-        throw new Error('error');
+    function BadRender() {
+      throw new Error('error');
+    }
+
+    class ErrorBoundary extends React.Component {
+      componentDidCatch() {
+        this.props.parent.remount();
       }
       render() {
-        return null;
+        return <BadRender />;
       }
     }
 
-    class ErrorBoundary extends React.Component {
-      componentDidCatch() {
-        // Noop
-        this.setState({});
+    class NonTerminating extends React.Component {
+      state = {step: 0};
+      remount() {
+        this.setState(state => ({step: state.step + 1}));
       }
       render() {
-        return <BadMount />;
+        return <ErrorBoundary key={this.state.step} parent={this} />;
       }
     }
 
     const container = document.createElement('div');
     expect(() => {
-      ReactDOM.render(<ErrorBoundary />, container);
+      ReactDOM.render(<NonTerminating />, container);
     }).toThrow('Maximum');
   });
 });

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -40,6 +40,7 @@ import {
 } from 'shared/ReactTypeOfSideEffect';
 import {ReactCurrentOwner} from 'shared/ReactGlobalSharedState';
 import {
+  enableGetDerivedStateFromCatch,
   debugRenderPhaseSideEffects,
   debugRenderPhaseSideEffectsForStrictMode,
 } from 'shared/ReactFeatureFlags';
@@ -49,9 +50,7 @@ import warning from 'fbjs/lib/warning';
 import ReactDebugCurrentFiber from './ReactDebugCurrentFiber';
 import {cancelWorkTimer} from './ReactDebugFiberPerf';
 
-import ReactFiberClassComponent, {
-  callGetDerivedStateFromCatch,
-} from './ReactFiberClassComponent';
+import ReactFiberClassComponent from './ReactFiberClassComponent';
 import {
   mountChildFibers,
   reconcileChildFibers,
@@ -256,19 +255,6 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
     const hasContext = pushLegacyContextProvider(workInProgress);
     const instance = workInProgress.stateNode;
 
-    // Check if this component captured any errors. If so, grab them off
-    // the instance.
-    let didCaptureError = false;
-    let updateQueue = workInProgress.updateQueue;
-    if (updateQueue !== null) {
-      const capturedErrors = updateQueue.capturedValues;
-      if (capturedErrors !== null) {
-        didCaptureError = true;
-        invariant(instance !== null, 'Expected class to have an instance.');
-        callGetDerivedStateFromCatch(instance, capturedErrors);
-      }
-    }
-
     let shouldUpdate;
     if (current === null) {
       if (instance === null) {
@@ -295,7 +281,8 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
     // We processed the update queue inside updateClassInstance. It may have
     // included some errors that were dispatched during the commit phase.
     // TODO: Refactor class components so this is less awkward.
-    updateQueue = workInProgress.updateQueue;
+    let didCaptureError = false;
+    const updateQueue = workInProgress.updateQueue;
     if (updateQueue !== null && updateQueue.capturedValues !== null) {
       workInProgress.effectTag |= DidCapture;
       shouldUpdate = true;
@@ -339,8 +326,14 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
     let nextChildren;
     if (
       didCaptureError &&
-      typeof ctor.getDerivedStateFromCatch !== 'function'
+      (!enableGetDerivedStateFromCatch ||
+        typeof ctor.getDerivedStateFromCatch !== 'function')
     ) {
+      // If we captured an error, but getDerivedStateFrom catch is not defined,
+      // unmount all the children. componentDidCatch will schedule an update to
+      // re-render a fallback. This is temporary until we migrate everyone to
+      // the new API.
+      // TODO: Warn in a future release.
       nextChildren = null;
     } else {
       if (__DEV__) {

packages/react-reconciler/src/ReactFiberClassComponent.js

@@ -9,9 +9,11 @@
 
 import type {Fiber} from './ReactFiber';
 import type {ExpirationTime} from './ReactFiberExpirationTime';
+import type {CapturedValue} from './ReactCapturedValue';
 
 import {Update} from 'shared/ReactTypeOfSideEffect';
 import {
+  enableGetDerivedStateFromCatch,
   debugRenderPhaseSideEffects,
   debugRenderPhaseSideEffectsForStrictMode,
   warnAboutDeprecatedLifecycles,
@@ -94,17 +96,17 @@ if (__DEV__) {
   });
   Object.freeze(fakeInternalInstance);
 }
-
-export function callGetDerivedStateFromCatch(
-  ctor: any,
-  capturedValues: Array<mixed>,
-) {
-  // TODO:
-  // for (let i = 0; i < capturedValues.length; i++) {
-  //   const capturedValue: CapturedValue<mixed> = (capturedValues[i]: any);
-  //   const error = capturedValue.value;
-  //   ctor.getDerivedStateFromCatch(error);
-  // }
+function callGetDerivedStateFromCatch(ctor: any, capturedValues: Array<mixed>) {
+  const resultState = {};
+  for (let i = 0; i < capturedValues.length; i++) {
+    const capturedValue: CapturedValue<mixed> = (capturedValues[i]: any);
+    const error = capturedValue.value;
+    const partialState = ctor.getDerivedStateFromCatch.call(null, error);
+    if (partialState !== null && partialState !== undefined) {
+      Object.assign(resultState, partialState);
+    }
+  }
+  return resultState;
 }
 
 export default function(
@@ -687,6 +689,8 @@ export default function(
     // ever the previously attempted to render - not the "current". However,
     // during componentDidUpdate we pass the "current" props.
 
+    // In order to support react-lifecycles-compat polyfilled components,
+    // Unsafe lifecycles should not be invoked for any component with the new gDSFP.
     if (
       (typeof instance.UNSAFE_componentWillReceiveProps === 'function' ||
         typeof instance.componentWillReceiveProps === 'function') &&
@@ -702,10 +706,20 @@ export default function(
       }
     }
 
+    let derivedStateFromProps;
+    if (oldProps !== newProps) {
+      derivedStateFromProps = callGetDerivedStateFromProps(
+        workInProgress,
+        instance,
+        newProps,
+      );
+    }
+
     // Compute the next state using the memoized state and the update queue.
     const oldState = workInProgress.memoizedState;
     // TODO: Previous state can be null.
     let newState;
+    let derivedStateFromCatch;
     if (workInProgress.updateQueue !== null) {
       newState = processUpdateQueue(
         null,
@@ -720,27 +734,42 @@ export default function(
       if (
         updateQueue !== null &&
         updateQueue.capturedValues !== null &&
-        typeof ctor.getDerivedStateFromCatch === 'function'
+        (enableGetDerivedStateFromCatch &&
+          typeof ctor.getDerivedStateFromCatch === 'function')
       ) {
         const capturedValues = updateQueue.capturedValues;
         // Don't remove these from the update queue yet. We need them in
         // finishClassComponent. Do the reset there.
         // TODO: This is awkward. Refactor class components.
         // updateQueue.capturedValues = null;
-        callGetDerivedStateFromCatch(ctor, capturedValues);
-        newState = processUpdateQueue(
-          null,
-          workInProgress,
-          updateQueue,
-          instance,
-          newProps,
-          renderExpirationTime,
+        derivedStateFromCatch = callGetDerivedStateFromCatch(
+          ctor,
+          capturedValues,
         );
       }
     } else {
       newState = oldState;
     }
 
+    if (derivedStateFromProps !== null && derivedStateFromProps !== undefined) {
+      // Render-phase updates (like this) should not be added to the update queue,
+      // So that multiple render passes do not enqueue multiple updates.
+      // Instead, just synchronously merge the returned state into the instance.
+      newState =
+        newState === null || newState === undefined
+          ? derivedStateFromProps
+          : Object.assign({}, newState, derivedStateFromProps);
+    }
+    if (derivedStateFromCatch !== null && derivedStateFromCatch !== undefined) {
+      // Render-phase updates (like this) should not be added to the update queue,
+      // So that multiple render passes do not enqueue multiple updates.
+      // Instead, just synchronously merge the returned state into the instance.
+      newState =
+        newState === null || newState === undefined
+          ? derivedStateFromCatch
+          : Object.assign({}, newState, derivedStateFromCatch);
+    }
+
     if (
       oldProps === newProps &&
       oldState === newState &&
@@ -752,7 +781,7 @@ export default function(
     ) {
       // If an update was already in progress, we should schedule an Update
       // effect even though we're bailing out, so that cWU/cDU are called.
-      if (typeof instance.componentDidUpdate === 'function') {
+      if (typeof instance.componentDidMount === 'function') {
         workInProgress.effectTag |= Update;
       }
       return false;
@@ -768,45 +797,23 @@ export default function(
     );
 
     if (shouldUpdate) {
-      if (__DEV__) {
-        if (workInProgress.mode & StrictMode) {
-          ReactStrictModeWarnings.recordUnsafeLifecycleWarnings(
-            workInProgress,
-            instance,
-          );
-        }
-
-        if (warnAboutDeprecatedLifecycles) {
-          ReactStrictModeWarnings.recordDeprecationWarnings(
-            workInProgress,
-            instance,
-          );
-        }
-      }
-
       // In order to support react-lifecycles-compat polyfilled components,
       // Unsafe lifecycles should not be invoked for any component with the new gDSFP.
       if (
-        (typeof instance.UNSAFE_componentWillMount === 'function' ||
-          typeof instance.componentWillMount === 'function') &&
+        (typeof instance.UNSAFE_componentWillUpdate === 'function' ||
+          typeof instance.componentWillUpdate === 'function') &&
         typeof ctor.getDerivedStateFromProps !== 'function'
       ) {
-        callComponentWillMount(workInProgress, instance);
-        // If we had additional state updates during this life-cycle, let's
-        // process them now.
-        const updateQueue = workInProgress.updateQueue;
-        if (updateQueue !== null) {
-          instance.state = processUpdateQueue(
-            workInProgress.alternate,
-            workInProgress,
-            updateQueue,
-            instance,
-            newProps,
-            renderExpirationTime,
-          );
+        startPhaseTimer(workInProgress, 'componentWillUpdate');
+        if (typeof instance.componentWillUpdate === 'function') {
+          instance.componentWillUpdate(newProps, newState, newContext);
+        }
+        if (typeof instance.UNSAFE_componentWillUpdate === 'function') {
+          instance.UNSAFE_componentWillUpdate(newProps, newState, newContext);
         }
+        stopPhaseTimer();
       }
-      if (typeof instance.componentDidMount === 'function') {
+      if (typeof instance.componentDidUpdate === 'function') {
         workInProgress.effectTag |= Update;
       }
     } else {
@@ -868,9 +875,9 @@ export default function(
       }
     }
 
-    let partialState;
+    let derivedStateFromProps;
     if (oldProps !== newProps) {
-      partialState = callGetDerivedStateFromProps(
+      derivedStateFromProps = callGetDerivedStateFromProps(
         workInProgress,
         instance,
         newProps,
@@ -881,6 +888,7 @@ export default function(
     const oldState = workInProgress.memoizedState;
     // TODO: Previous state can be null.
     let newState;
+    let derivedStateFromCatch;
     if (workInProgress.updateQueue !== null) {
       newState = processUpdateQueue(
         current,
@@ -895,35 +903,40 @@ export default function(
       if (
         updateQueue !== null &&
         updateQueue.capturedValues !== null &&
-        typeof ctor.getDerivedStateFromCatch === 'function'
+        (enableGetDerivedStateFromCatch &&
+          typeof ctor.getDerivedStateFromCatch === 'function')
       ) {
         const capturedValues = updateQueue.capturedValues;
         // Don't remove these from the update queue yet. We need them in
         // finishClassComponent. Do the reset there.
         // TODO: This is awkward. Refactor class components.
         // updateQueue.capturedValues = null;
-        callGetDerivedStateFromCatch(ctor, capturedValues);
-        newState = processUpdateQueue(
-          null,
-          workInProgress,
-          updateQueue,
-          instance,
-          newProps,
-          renderExpirationTime,
+        derivedStateFromCatch = callGetDerivedStateFromCatch(
+          ctor,
+          capturedValues,
         );
       }
     } else {
       newState = oldState;
     }
 
-    if (partialState !== null && partialState !== undefined) {
+    if (derivedStateFromProps !== null && derivedStateFromProps !== undefined) {
+      // Render-phase updates (like this) should not be added to the update queue,
+      // So that multiple render passes do not enqueue multiple updates.
+      // Instead, just synchronously merge the returned state into the instance.
+      newState =
+        newState === null || newState === undefined
+          ? derivedStateFromProps
+          : Object.assign({}, newState, derivedStateFromProps);
+    }
+    if (derivedStateFromCatch !== null && derivedStateFromCatch !== undefined) {
       // Render-phase updates (like this) should not be added to the update queue,
       // So that multiple render passes do not enqueue multiple updates.
       // Instead, just synchronously merge the returned state into the instance.
       newState =
         newState === null || newState === undefined
-          ? partialState
-          : Object.assign({}, newState, partialState);
+          ? derivedStateFromCatch
+          : Object.assign({}, newState, derivedStateFromCatch);
     }
 
     if (