Re-implement begin phase for hydration

Author: acdlite

src/renderers/shared/fiber/ReactFiberBeginWork.js

@@ -288,27 +288,37 @@ function reconcile(
     nextChildren,
     nextProps,
     nextState,
+    false,
     renderPriority,
   );
   return child;
 }
 exports.reconcile = reconcile;
 
-// Split this out so that it can be shared between the normal reconcile
-// function and beginCoroutineComponent, which reconciles against a child
-// that is stored on the stateNode.
+// Lower level version of reconcile function with more options for special
+// cases. My thinking is that, for now, this is preferable to forking, because
+// it's really easy to mess up when keeping the forks in sync.
+// TODO: Unify this with reconcileChildFibers constructor?
 function reconcileImpl(
   current: Fiber | null,
   workInProgress: Fiber,
   child: Fiber | null, // Child to reconcile against
   nextChildren: any,
   nextProps: any | null,
   nextState: mixed | null,
+  forceMountInPlace: boolean,
   renderPriority: PriorityLevel,
 ): Fiber | null {
   // We have new children. Update the child set.
   let newChild;
-  if (current === null) {
+  if (forceMountInPlace) {
+    newChild = mountChildFibersInPlace(
+      workInProgress,
+      child,
+      nextChildren,
+      renderPriority,
+    );
+  } else if (current === null) {
     if (workInProgress.tag === HostPortal) {
       // Portals are special because we don't append the children during mount
       // but at commit. Therefore we need to track insertions which the normal
@@ -514,7 +524,7 @@ function resumeOrResetWork(
 const BeginWork = function<T, P, I, TI, PI, C, CX, PL>(
   config: HostConfig<T, P, I, TI, PI, C, CX, PL>,
   hostContext: HostContext<C, CX>,
-  hydrationContext: HydrationContext,
+  hydrationContext: HydrationContext<I, TI>,
   scheduleUpdate: (fiber: Fiber, priorityLevel: PriorityLevel) => void,
   getPriorityContext: (fiber: Fiber, forceAsync: boolean) => PriorityLevel,
 ) {
@@ -527,6 +537,12 @@ const BeginWork = function<T, P, I, TI, PI, C, CX, PL>(
   const {pushHostContext, pushHostContainer} = hostContext;
   const classUpdater = ClassUpdater(scheduleUpdate, getPriorityContext);
 
+  const {
+    enterHydrationState,
+    resetHydrationState,
+    tryToClaimNextHydratableInstance,
+  } = hydrationContext;
+
   function checkForUpdatedRef(current: Fiber | null, workInProgress: Fiber) {
     const ref = workInProgress.ref;
     if (ref !== null && (current === null || current.ref !== ref)) {
@@ -578,6 +594,7 @@ const BeginWork = function<T, P, I, TI, PI, C, CX, PL>(
     if (nextState === memoizedState) {
       // No new state. The root doesn't have props. Bailout.
       // TODO: What about context?
+      resetHydrationState();
       return bailout(
         current,
         workInProgress,
@@ -589,15 +606,44 @@ const BeginWork = function<T, P, I, TI, PI, C, CX, PL>(
 
     // The state was updated. We have a new element.
     const nextChildren = nextState.element;
+
+    // If we don't have any current children this might be the first pass.
+    // We always try to hydrate. If this isn't a hydration pass there won't
+    // be any children to hydrate which is effectively the same thing as
+    // not hydrating.
+    let forceMountInPlace;
+    if (
+      (current === null || current.child === null) &&
+      enterHydrationState(workInProgress)
+    ) {
+      // Ensure that children mount into this root without tracking
+      // side-effects. This ensures that we don't store Placement effects on
+      // nodes that will be hydrated.
+      forceMountInPlace = true;
+
+      // This is a bit of a hack. We track the host root as a placement to
+      // know that we're currently in a mounting state. That way isMounted
+      // works as expected. We must reset this before committing.
+      // TODO: Delete this when we delete isMounted and findDOMNode.
+      workInProgress.effectTag |= Placement;
+    } else {
+      // Otherwise, reset the hydration state
+      resetHydrationState();
+      forceMountInPlace = false;
+    }
+
     // Reconcile the children.
-    return reconcile(
+    const child = workInProgress.child = reconcileImpl(
       current,
       workInProgress,
+      workInProgress.child,
       nextChildren,
       null,
       nextState,
+      forceMountInPlace,
       renderPriority,
     );
+    return child;
   }
 
   function beginHostPortal(
@@ -632,6 +678,10 @@ const BeginWork = function<T, P, I, TI, PI, C, CX, PL>(
   ): Fiber | null {
     pushHostContext(workInProgress);
 
+    if (current === null) {
+      tryToClaimNextHydratableInstance(workInProgress);
+    }
+
     const memoizedProps = workInProgress.memoizedProps;
 
     // Check if the ref has changed and schedule an effect. This should happen
@@ -698,6 +748,10 @@ const BeginWork = function<T, P, I, TI, PI, C, CX, PL>(
     nextProps: any,
     renderPriority: PriorityLevel,
   ): Fiber | null {
+    if (current === null) {
+      tryToClaimNextHydratableInstance(workInProgress);
+    }
+
     const memoizedProps = workInProgress.memoizedProps;
     if (nextProps === memoizedProps) {
       return bailout(current, workInProgress, nextProps, null, renderPriority);
@@ -1297,6 +1351,7 @@ const BeginWork = function<T, P, I, TI, PI, C, CX, PL>(
       nextCoroutine.children,
       nextCoroutine,
       null,
+      false,
       renderPriority,
     );
     return child;

src/renderers/shared/fiber/ReactFiberHydrationContext.js

@@ -90,21 +90,15 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
     childToDelete.stateNode = instance;
     childToDelete.return = returnFiber;
     // Deletions are added in reversed order so we add it to the front.
-    const last = returnFiber.progressedLastDeletion;
+    const last = returnFiber.lastDeletion;
     if (last !== null) {
       last.nextEffect = childToDelete;
-      returnFiber.progressedLastDeletion = childToDelete;
+      returnFiber.lastDeletion = childToDelete;
     } else {
-      returnFiber.progressedFirstDeletion = returnFiber.progressedLastDeletion = childToDelete;
+      returnFiber.firstDeletion = returnFiber.lastDeletion = childToDelete;
     }
+    childToDelete.nextEffect = null;
     childToDelete.effectTag = Deletion;
-
-    if (returnFiber.lastEffect !== null) {
-      returnFiber.lastEffect.nextEffect = childToDelete;
-      returnFiber.lastEffect = childToDelete;
-    } else {
-      returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
-    }
   }
 
   function tryToClaimNextHydratableInstance(fiber: Fiber) {