Resolve defaultProps for lazy types

Author: acdlite

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -191,6 +191,34 @@ function updateForwardRef(
   return workInProgress.child;
 }
 
+function updateForwardRefLazy(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  Component: any,
+  renderExpirationTime: ExpirationTime,
+) {
+  const props = workInProgress.pendingProps;
+  const resolvedProps = resolveDefaultProps(Component, props);
+  if (resolvedProps !== null) {
+    workInProgress.pendingProps = resolvedProps;
+    const child = updateForwardRef(
+      current,
+      workInProgress,
+      Component,
+      renderExpirationTime,
+    );
+    workInProgress.pendingProps = workInProgress.memoizedProps = props;
+    return child;
+  } else {
+    return updateForwardRef(
+      current,
+      workInProgress,
+      Component,
+      renderExpirationTime,
+    );
+  }
+}
+
 function updateFragment(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -287,6 +315,34 @@ function updateFunctionalComponent(
   return workInProgress.child;
 }
 
+function updateFunctionalComponentLazy(
+  current,
+  workInProgress,
+  Component,
+  renderExpirationTime,
+) {
+  const props = workInProgress.pendingProps;
+  const resolvedProps = resolveDefaultProps(Component, props);
+  if (resolvedProps !== null) {
+    workInProgress.pendingProps = resolvedProps;
+    const child = updateFunctionalComponent(
+      current,
+      workInProgress,
+      Component,
+      renderExpirationTime,
+    );
+    workInProgress.pendingProps = workInProgress.memoizedProps = props;
+    return child;
+  } else {
+    return updateFunctionalComponent(
+      current,
+      workInProgress,
+      Component,
+      renderExpirationTime,
+    );
+  }
+}
+
 function updateClassComponent(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -436,6 +492,34 @@ function finishClassComponent(
   return workInProgress.child;
 }
 
+function updateClassComponentLazy(
+  current,
+  workInProgress,
+  Component,
+  renderExpirationTime,
+) {
+  const props = workInProgress.pendingProps;
+  const resolvedProps = resolveDefaultProps(Component, props);
+  if (resolvedProps !== null) {
+    workInProgress.pendingProps = resolvedProps;
+    const child = updateClassComponent(
+      current,
+      workInProgress,
+      Component,
+      renderExpirationTime,
+    );
+    workInProgress.pendingProps = workInProgress.memoizedProps = props;
+    return child;
+  } else {
+    return updateClassComponent(
+      current,
+      workInProgress,
+      Component,
+      renderExpirationTime,
+    );
+  }
+}
+
 function pushHostRootContext(workInProgress) {
   const root = (workInProgress.stateNode: FiberRoot);
   if (root.pendingContext) {
@@ -585,6 +669,21 @@ function updateHostText(current, workInProgress) {
   return null;
 }
 
+function resolveDefaultProps(Component, baseProps) {
+  if (Component && Component.defaultProps) {
+    // Resolve default props. Taken from ReactElement
+    const props = Object.assign({}, baseProps);
+    const defaultProps = Component.defaultProps;
+    for (let propName in defaultProps) {
+      if (props[propName] === undefined) {
+        props[propName] = defaultProps[propName];
+      }
+    }
+    return props;
+  }
+  return null;
+}
+
 function mountIndeterminateComponent(
   current,
   workInProgress,
@@ -597,6 +696,7 @@ function mountIndeterminateComponent(
       'likely caused by a bug in React. Please file an issue.',
   );
 
+  const props = workInProgress.pendingProps;
   if (
     Component !== null &&
     Component !== undefined &&
@@ -606,32 +706,28 @@ function mountIndeterminateComponent(
     if (typeof Component === 'function') {
       if (shouldConstruct(Component)) {
         workInProgress.tag = ClassComponentLazy;
-        return updateClassComponent(
+        return updateClassComponentLazy(
           current,
           workInProgress,
           Component,
           renderExpirationTime,
         );
       } else {
-        const child = mountIndeterminateComponent(
+        workInProgress.tag = FunctionalComponentLazy;
+        return updateFunctionalComponentLazy(
           current,
           workInProgress,
           Component,
           renderExpirationTime,
         );
-        workInProgress.tag =
-          workInProgress.tag === FunctionalComponent
-            ? FunctionalComponentLazy
-            : ClassComponentLazy;
-        return child;
       }
     } else if (
       Component !== undefined &&
       Component !== null &&
       Component.$$typeof
     ) {
       workInProgress.tag = ForwardRefLazy;
-      return updateForwardRef(
+      return updateForwardRefLazy(
         current,
         workInProgress,
         Component,
@@ -640,7 +736,6 @@ function mountIndeterminateComponent(
     }
   }
 
-  const props = workInProgress.pendingProps;
   const unmaskedContext = getUnmaskedContext(workInProgress);
   const context = getMaskedContext(workInProgress, unmaskedContext);
 
@@ -1112,7 +1207,7 @@ function beginWork(
     case FunctionalComponentLazy: {
       const thenable = workInProgress.type;
       const Component = (thenable._reactResult: any);
-      return updateFunctionalComponent(
+      return updateFunctionalComponentLazy(
         current,
         workInProgress,
         Component,
@@ -1131,7 +1226,7 @@ function beginWork(
     case ClassComponentLazy: {
       const thenable = workInProgress.type;
       const Component = (thenable._reactResult: any);
-      return updateClassComponent(
+      return updateClassComponentLazy(
         current,
         workInProgress,
         Component,
@@ -1168,7 +1263,7 @@ function beginWork(
     case ForwardRefLazy:
       const thenable = workInProgress.type;
       const Component = (thenable._reactResult: any);
-      return updateForwardRef(
+      return updateForwardRefLazy(
         current,
         workInProgress,
         Component,

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

@@ -1472,6 +1472,37 @@ describe('ReactSuspense', () => {
       expect(ReactNoop.flush()).toEqual(['Hi again']);
       expect(ReactNoop.getChildren()).toEqual([span('Hi again')]);
     });
+
+    it('resolves defaultProps, on mount and update', async () => {
+      function T(props) {
+        return <Text {...props} />;
+      }
+      T.defaultProps = {text: 'Hi'};
+      const LazyText = Promise.resolve(T);
+
+      ReactNoop.render(
+        <Placeholder fallback={<Text text="Loading..." />}>
+          <LazyText />
+        </Placeholder>,
+      );
+      expect(ReactNoop.flush()).toEqual(['Loading...']);
+      expect(ReactNoop.getChildren()).toEqual([]);
+
+      await LazyText;
+
+      expect(ReactNoop.flush()).toEqual(['Hi']);
+      expect(ReactNoop.getChildren()).toEqual([span('Hi')]);
+
+      T.defaultProps = {text: 'Hi again'};
+
+      ReactNoop.render(
+        <Placeholder fallback={<Text text="Loading..." />}>
+          <LazyText text="Hi again" />
+        </Placeholder>,
+      );
+      expect(ReactNoop.flush()).toEqual(['Hi again']);
+      expect(ReactNoop.getChildren()).toEqual([span('Hi again')]);
+    });
   });
 
   it('does not call lifecycles of a suspended component', async () => {