Unfork Lazy Component Branches

packages/react-dom/src/test-utils/ReactTestUtils.js

@@ -11,9 +11,7 @@ import {findCurrentFiberUsingSlowPath} from 'react-reconciler/reflection';
 import * as ReactInstanceMap from 'shared/ReactInstanceMap';
 import {
   ClassComponent,
-  ClassComponentLazy,
   FunctionComponent,
-  FunctionComponentLazy,
   HostComponent,
   HostText,
 } from 'shared/ReactWorkTags';
@@ -92,9 +90,7 @@ function findAllInRenderedFiberTreeInternal(fiber, test) {
       node.tag === HostComponent ||
       node.tag === HostText ||
       node.tag === ClassComponent ||
-      node.tag === ClassComponentLazy ||
-      node.tag === FunctionComponent ||
-      node.tag === FunctionComponentLazy
+      node.tag === FunctionComponent
     ) {
       const publicInst = node.stateNode;
       if (test(publicInst)) {

packages/react-reconciler/src/ReactChildFiber.js

@@ -23,7 +23,6 @@ import {
 import {
   FunctionComponent,
   ClassComponent,
-  ClassComponentLazy,
   HostText,
   HostPortal,
   Fragment,
@@ -138,8 +137,7 @@ function coerceRef(
       if (owner) {
         const ownerFiber = ((owner: any): Fiber);
         invariant(
-          ownerFiber.tag === ClassComponent ||
-            ownerFiber.tag === ClassComponentLazy,
+          ownerFiber.tag === ClassComponent,
           'Function components cannot have refs.',
         );
         inst = ownerFiber.stateNode;
@@ -379,7 +377,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     element: ReactElement,
     expirationTime: ExpirationTime,
   ): Fiber {
-    if (current !== null && current.type === element.type) {
+    if (current !== null && current.elementType === element.type) {
       // Move based on index
       const existing = useFiber(current, element.props, expirationTime);
       existing.ref = coerceRef(returnFiber, current, element);
@@ -1122,7 +1120,7 @@ function ChildReconciler(shouldTrackSideEffects) {
         if (
           child.tag === Fragment
             ? element.type === REACT_FRAGMENT_TYPE
-            : child.type === element.type
+            : child.elementType === element.type
         ) {
           deleteRemainingChildren(returnFiber, child.sibling);
           const existing = useFiber(
@@ -1309,8 +1307,7 @@ function ChildReconciler(shouldTrackSideEffects) {
       // component, throw an error. If Fiber return types are disabled,
       // we already threw above.
       switch (returnFiber.tag) {
-        case ClassComponent:
-        case ClassComponentLazy: {
+        case ClassComponent: {
           if (__DEV__) {
             const instance = returnFiber.stateNode;
             if (instance.render._isMockFunction) {

packages/react-reconciler/src/ReactCurrentFiber.js

@@ -11,11 +11,10 @@ import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
   IndeterminateComponent,
   FunctionComponent,
-  FunctionComponentLazy,
   ClassComponent,
-  ClassComponentLazy,
   HostComponent,
   Mode,
+  LazyComponent,
 } from 'shared/ReactWorkTags';
 import describeComponentFrame from 'shared/describeComponentFrame';
 import getComponentName from 'shared/getComponentName';
@@ -29,10 +28,9 @@ type LifeCyclePhase = 'render' | 'getChildContext';
 function describeFiber(fiber: Fiber): string {
   switch (fiber.tag) {
     case IndeterminateComponent:
+    case LazyComponent:
     case FunctionComponent:
-    case FunctionComponentLazy:
     case ClassComponent:
-    case ClassComponentLazy:
     case HostComponent:
     case Mode:
       const owner = fiber._debugOwner;

packages/react-reconciler/src/ReactFiber.js

@@ -34,11 +34,9 @@ import {
   ContextConsumer,
   Profiler,
   SuspenseComponent,
-  FunctionComponentLazy,
-  ClassComponentLazy,
-  ForwardRefLazy,
+  FunctionComponent,
   PureComponent,
-  PureComponentLazy,
+  LazyComponent,
 } from 'shared/ReactWorkTags';
 import getComponentName from 'shared/getComponentName';
 
@@ -101,7 +99,11 @@ export type Fiber = {|
   // Unique identifier of this child.
   key: null | string,
 
-  // The function/class/module associated with this fiber.
+  // The value of element.type which is used to preserve the identity during
+  // reconciliation of this child.
+  elementType: any,
+
+  // The resolved function/class/ associated with this fiber.
   type: any,
 
   // The local state associated with this fiber.
@@ -219,6 +221,7 @@ function FiberNode(
   // Instance
   this.tag = tag;
   this.key = key;
+  this.elementType = null;
   this.type = null;
   this.stateNode = null;
 
@@ -301,16 +304,14 @@ export function resolveLazyComponentTag(
   Component: Function,
 ): WorkTag {
   if (typeof Component === 'function') {
-    return shouldConstruct(Component)
-      ? ClassComponentLazy
-      : FunctionComponentLazy;
+    return shouldConstruct(Component) ? ClassComponent : FunctionComponent;
   } else if (Component !== undefined && Component !== null) {
     const $$typeof = Component.$$typeof;
     if ($$typeof === REACT_FORWARD_REF_TYPE) {
-      return ForwardRefLazy;
+      return ForwardRef;
     }
     if ($$typeof === REACT_PURE_TYPE) {
-      return PureComponentLazy;
+      return PureComponent;
     }
   }
   return IndeterminateComponent;
@@ -335,6 +336,7 @@ export function createWorkInProgress(
       current.key,
       current.mode,
     );
+    workInProgress.elementType = current.elementType;
     workInProgress.type = current.type;
     workInProgress.stateNode = current.stateNode;
 
@@ -404,7 +406,7 @@ export function createHostRootFiber(isConcurrent: boolean): Fiber {
   return createFiber(HostRoot, null, null, mode);
 }
 
-export function createFiberFromElement(
+function createFiberFromElementWithoutDebugInfo(
   element: ReactElement,
   mode: TypeOfMode,
   expirationTime: ExpirationTime,
@@ -419,9 +421,13 @@ export function createFiberFromElement(
   const key = element.key;
   const pendingProps = element.props;
 
-  let fiberTag;
+  let fiberTag = IndeterminateComponent;
+  // The resolved type is set if we know what the final type will be. I.e. it's not lazy.
+  let resolvedType = type;
   if (typeof type === 'function') {
-    fiberTag = shouldConstruct(type) ? ClassComponent : IndeterminateComponent;
+    if (shouldConstruct(type)) {
+      fiberTag = ClassComponent;
+    }
   } else if (typeof type === 'string') {
     fiberTag = HostComponent;
   } else {
@@ -434,18 +440,23 @@ export function createFiberFromElement(
           key,
         );
       case REACT_CONCURRENT_MODE_TYPE:
-        fiberTag = Mode;
-        mode |= ConcurrentMode | StrictMode;
-        break;
+        return createFiberFromMode(
+          pendingProps,
+          mode | ConcurrentMode | StrictMode,
+          expirationTime,
+          key,
+        );
       case REACT_STRICT_MODE_TYPE:
-        fiberTag = Mode;
-        mode |= StrictMode;
-        break;
+        return createFiberFromMode(
+          pendingProps,
+          mode | StrictMode,
+          expirationTime,
+          key,
+        );
       case REACT_PROFILER_TYPE:
         return createFiberFromProfiler(pendingProps, mode, expirationTime, key);
       case REACT_SUSPENSE_TYPE:
-        fiberTag = SuspenseComponent;
-        break;
+        return createFiberFromSuspense(pendingProps, mode, expirationTime, key);
       default: {
         if (typeof type === 'object' && type !== null) {
           switch (type.$$typeof) {
@@ -463,7 +474,8 @@ export function createFiberFromElement(
               fiberTag = PureComponent;
               break getTag;
             case REACT_LAZY_TYPE:
-              fiberTag = IndeterminateComponent;
+              fiberTag = LazyComponent;
+              resolvedType = null;
               break getTag;
           }
         }
@@ -498,14 +510,27 @@ export function createFiberFromElement(
   }
 
   fiber = createFiber(fiberTag, pendingProps, key, mode);
-  fiber.type = type;
+  fiber.elementType = type;
+  fiber.type = resolvedType;
   fiber.expirationTime = expirationTime;
 
+  return fiber;
+}
+
+export function createFiberFromElement(
+  element: ReactElement,
+  mode: TypeOfMode,
+  expirationTime: ExpirationTime,
+): Fiber {
+  const fiber = createFiberFromElementWithoutDebugInfo(
+    element,
+    mode,
+    expirationTime,
+  );
   if (__DEV__) {
     fiber._debugSource = element._source;
     fiber._debugOwner = element._owner;
   }
-
   return fiber;
 }
 
@@ -520,7 +545,7 @@ export function createFiberFromFragment(
   return fiber;
 }
 
-export function createFiberFromProfiler(
+function createFiberFromProfiler(
   pendingProps: any,
   mode: TypeOfMode,
   expirationTime: ExpirationTime,
@@ -539,12 +564,51 @@ export function createFiberFromProfiler(
   }
 
   const fiber = createFiber(Profiler, pendingProps, key, mode | ProfileMode);
+  // TODO: The Profiler fiber shouldn't have a type. It has a tag.
+  fiber.elementType = REACT_PROFILER_TYPE;
   fiber.type = REACT_PROFILER_TYPE;
   fiber.expirationTime = expirationTime;
 
   return fiber;
 }
 
+function createFiberFromMode(
+  pendingProps: any,
+  mode: TypeOfMode,
+  expirationTime: ExpirationTime,
+  key: null | string,
+): Fiber {
+  const fiber = createFiber(Mode, pendingProps, key, mode);
+
+  // TODO: The Mode fiber shouldn't have a type. It has a tag.
+  const type =
+    (mode & ConcurrentMode) === NoContext
+      ? REACT_STRICT_MODE_TYPE
+      : REACT_CONCURRENT_MODE_TYPE;
+  fiber.elementType = type;
+  fiber.type = type;
+
+  fiber.expirationTime = expirationTime;
+  return fiber;
+}
+
+export function createFiberFromSuspense(
+  pendingProps: any,
+  mode: TypeOfMode,
+  expirationTime: ExpirationTime,
+  key: null | string,
+) {
+  const fiber = createFiber(SuspenseComponent, pendingProps, key, mode);
+
+  // TODO: The SuspenseComponent fiber shouldn't have a type. It has a tag.
+  const type = REACT_SUSPENSE_TYPE;
+  fiber.elementType = type;
+  fiber.type = type;
+
+  fiber.expirationTime = expirationTime;
+  return fiber;
+}
+
 export function createFiberFromText(
   content: string,
   mode: TypeOfMode,
@@ -557,6 +621,8 @@ export function createFiberFromText(
 
 export function createFiberFromHostInstanceForDeletion(): Fiber {
   const fiber = createFiber(HostComponent, null, null, NoContext);
+  // TODO: These should not need a type.
+  fiber.elementType = 'DELETED';
   fiber.type = 'DELETED';
   return fiber;
 }
@@ -596,6 +662,7 @@ export function assignFiberPropertiesInDEV(
 
   target.tag = source.tag;
   target.key = source.key;
+  target.elementType = source.elementType;
   target.type = source.type;
   target.stateNode = source.stateNode;
   target.return = source.return;