Unfork Lazy Component Branches (#13902)

* Introduce elementType field

This will be used to store the wrapped type of an element. E.g. pure and
lazy.

The existing type field will be used for the unwrapped type within them.

* Store the unwrapped type on the type field of lazy components

* Use the raw tags for lazy components

Instead, we check if the elementType and type are equal to test if
we need to resolve props. This is slightly slower in the normal case
but will yield less code and branching.

* Clean up lazy branches

* Collapse work tag numbering

* Split IndeterminateComponent out from Lazy

This way we don't have to check the type in a hacky way in the
indeterminate path. Also, lets us deal with lazy that resolves to
indeterminate and such.

* Missing clean up in rebase

Author: sebmarkbage

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;