Replaced new root attribute with ClearContainer effect

Author: Brian Vaughn

packages/react-art/src/ReactARTHostConfig.js

@@ -427,6 +427,14 @@ export function unhideTextInstance(textInstance, text): void {
   // Noop
 }
 
+export function clearContainer(container: Container): void {
+  // TODO This doesn't work for anything other than SVG.
+  // Is that okay?
+  while (container.lastChild != null) {
+    container.lastChild.eject();
+  }
+}
+
 export function DEPRECATED_mountResponderInstance(
   responder: ReactEventResponder<any, any>,
   responderInstance: ReactEventResponderInstance<any, any>,

packages/react-dom/src/client/ReactDOMRoot.js

@@ -123,20 +123,12 @@ function createRootImpl(
     (options != null && options.hydrationOptions) || null;
   const root = createContainer(container, tag, hydrate, hydrationCallbacks);
   markContainerAsRoot(root.current, container);
-  if (hydrate) {
-    if (tag !== LegacyRoot) {
-      const doc =
-        container.nodeType === DOCUMENT_NODE
-          ? container
-          : container.ownerDocument;
-      eagerlyTrapReplayableEvents(container, doc);
-    }
-  } else if (container.lastChild != null) {
-    // If the container has children already and we aren't hydrating-
-    // schedule them to be cleared before we mount new, React-managed children.
-    // This mimics legacy render into subtree behavior in a way that is safe for concurrent mode.
-    // (It doesn't result in multiple obsevable mutations.)
-    root.clearContainerBeforeMount = true;
+  if (hydrate && tag !== LegacyRoot) {
+    const doc =
+      container.nodeType === DOCUMENT_NODE
+        ? container
+        : container.ownerDocument;
+    eagerlyTrapReplayableEvents(container, doc);
   }
   return root;
 }

packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js

@@ -74,7 +74,8 @@ describe('when Trusted Types are available in global object', () => {
         container,
       );
       expect(container.innerHTML).toBe('<div><b>Hi</b></div>');
-      expect(innerHTMLCalls.length).toBe(1);
+      // Second call to innerHTML is the ClearContainer check.
+      expect(innerHTMLCalls.length).toBe(2);
       // Ensure it didn't get stringified when passed to a DOM sink:
       expect(innerHTMLCalls[0]).toBe(ttObject1);
 

packages/react-native-renderer/src/ReactNativeHostConfig.js

@@ -482,6 +482,11 @@ export function unhideInstance(instance: Instance, props: Props): void {
   );
 }
 
+export function clearContainer(container: Container): void {
+  // TODO Implement this for React Native
+  // UIManager does not expose a "remove all" type method.
+}
+
 export function unhideTextInstance(
   textInstance: TextInstance,
   text: string,

packages/react-noop-renderer/src/createReactNoop.js

@@ -155,6 +155,10 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     insertInContainerOrInstanceBefore(parentInstance, child, beforeChild);
   }
 
+  function clearContainer(container: Container): void {
+    container.children.splice(0);
+  }
+
   function removeChildFromContainerOrInstance(
     parentInstance: Container | Instance,
     child: Instance | TextInstance,
@@ -502,6 +506,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         insertInContainerBefore,
         removeChild,
         removeChildFromContainer,
+        clearContainer,
 
         hideInstance(instance: Instance): void {
           instance.hidden = true;
@@ -531,6 +536,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         supportsPersistence: true,
 
         cloneInstance,
+        clearContainer,
 
         createContainerChildSet(
           container: Container,

packages/react-reconciler/src/ReactFiberCommitWork.new.js

@@ -68,6 +68,7 @@ import {
   Snapshot,
   Update,
   Passive,
+  ClearContainer,
 } from './ReactSideEffectTags';
 import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
@@ -111,6 +112,7 @@ import {
   commitHydratedContainer,
   commitHydratedSuspenseInstance,
   beforeRemoveInstance,
+  clearContainer,
 } from './ReactFiberHostConfig';
 import {
   captureCommitPhaseError,
@@ -293,7 +295,15 @@ function commitBeforeMutationLifeCycles(
       }
       return;
     }
-    case HostRoot:
+    case HostRoot: {
+      if (supportsMutation) {
+        if (finishedWork.effectTag & ClearContainer) {
+          const root = finishedWork.stateNode;
+          clearContainer(root.containerInfo);
+        }
+      }
+      return;
+    }
     case HostComponent:
     case HostText:
     case HostPortal:

packages/react-reconciler/src/ReactFiberCommitWork.old.js

@@ -68,6 +68,7 @@ import {
   Snapshot,
   Update,
   Passive,
+  ClearContainer,
 } from './ReactSideEffectTags';
 import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
@@ -111,6 +112,7 @@ import {
   commitHydratedContainer,
   commitHydratedSuspenseInstance,
   beforeRemoveInstance,
+  clearContainer,
 } from './ReactFiberHostConfig';
 import {
   captureCommitPhaseError,
@@ -293,7 +295,15 @@ function commitBeforeMutationLifeCycles(
       }
       return;
     }
-    case HostRoot:
+    case HostRoot: {
+      if (supportsMutation) {
+        if (finishedWork.effectTag & ClearContainer) {
+          const root = finishedWork.stateNode;
+          clearContainer(root.containerInfo);
+        }
+      }
+      return;
+    }
     case HostComponent:
     case HostText:
     case HostPortal:

packages/react-reconciler/src/ReactFiberCompleteWork.new.js

@@ -61,6 +61,7 @@ import {
   NoEffect,
   DidCapture,
   Deletion,
+  ClearContainer,
 } from './ReactSideEffectTags';
 import invariant from 'shared/invariant';
 
@@ -678,6 +679,12 @@ function completeWork(
           // If we hydrated, then we'll need to schedule an update for
           // the commit side-effects on the root.
           markUpdate(workInProgress);
+        } else {
+          // Schedule an effect to clear this container at the start of the next commit.
+          // This handles the case of React rendering into a container with previous children.
+          // It's also safe to do for updates too, because current.child would only be null
+          // if the previous render was null (so the the container would already be empty).
+          workInProgress.effectTag |= ClearContainer;
         }
       }
       updateHostContainer(workInProgress);

packages/react-reconciler/src/ReactFiberCompleteWork.old.js

@@ -61,6 +61,7 @@ import {
   NoEffect,
   DidCapture,
   Deletion,
+  ClearContainer,
 } from './ReactSideEffectTags';
 import invariant from 'shared/invariant';
 
@@ -678,6 +679,12 @@ function completeWork(
           // If we hydrated, then we'll need to schedule an update for
           // the commit side-effects on the root.
           markUpdate(workInProgress);
+        } else {
+          // Schedule an effect to clear this container at the start of the next commit.
+          // This handles the case of React rendering into a container with previous children.
+          // It's also safe to do for updates too, because current.child would only be null
+          // if the previous render was null (so the the container would already be empty).
+          workInProgress.effectTag |= ClearContainer;
         }
       }
       updateHostContainer(workInProgress);

packages/react-reconciler/src/ReactFiberHostConfigWithNoMutation.js

@@ -37,3 +37,4 @@ export const hideInstance = shim;
 export const hideTextInstance = shim;
 export const unhideInstance = shim;
 export const unhideTextInstance = shim;
+export const clearContainer = shim;