Add back root override for strict mode (#21428)

rickhanlonii · web-flow · commit e9a4a44aae67 · 2021-05-04T15:42:48.000-04:00
* Add back root override for strict mode

* Switch flag to boolean

* Fix flow
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -102,6 +102,20 @@ describe('ReactTestUtils.act()', () => {
       root.render(<App />);
       Scheduler.unstable_flushAll();
     });
+
+    // @gate experimental
+    it('warns in concurrent mode if root is strict', () => {
+      expect(() => {
+        const root = ReactDOM.unstable_createRoot(
+          document.createElement('div'),
+          {unstable_strictMode: true},
+        );
+        root.render(<App />);
+        Scheduler.unstable_flushAll();
+      }).toErrorDev([
+        'An update to App ran an effect, but was not wrapped in act(...)',
+      ]);
+    });
   });
 });
 
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -27,6 +27,7 @@ export type RootOptions = {
     mutableSources?: Array<MutableSource<any>>,
     ...
   },
+  unstable_strictMode?: boolean,
   unstable_concurrentUpdatesByDefault?: boolean,
   ...
 };
@@ -122,6 +123,7 @@ function createRootImpl(
       options.hydrationOptions != null &&
       options.hydrationOptions.mutableSources) ||
     null;
+  const isStrictMode = options != null && options.unstable_strictMode === true;
 
   let concurrentUpdatesByDefaultOverride = null;
   if (allowConcurrentByDefault) {
@@ -136,6 +138,7 @@ function createRootImpl(
     tag,
     hydrate,
     hydrationCallbacks,
+    isStrictMode,
     concurrentUpdatesByDefaultOverride,
   );
   markContainerAsRoot(root.current, container);
diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
@@ -207,7 +207,7 @@ function render(
   if (!root) {
     // TODO (bvaughn): If we decide to keep the wrapper component,
     // We could create a wrapper for containerTag as well to reduce special casing.
-    root = createContainer(containerTag, LegacyRoot, false, null, null);
+    root = createContainer(containerTag, LegacyRoot, false, null, false, null);
     roots.set(containerTag, root);
   }
   updateContainer(element, root, null, callback);
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -203,7 +203,7 @@ function render(
   if (!root) {
     // TODO (bvaughn): If we decide to keep the wrapper component,
     // We could create a wrapper for containerTag as well to reduce special casing.
-    root = createContainer(containerTag, LegacyRoot, false, null, null);
+    root = createContainer(containerTag, LegacyRoot, false, null, false, null);
     roots.set(containerTag, root);
   }
   updateContainer(element, root, null, callback);
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
@@ -722,7 +722,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       if (!root) {
         const container = {rootID: rootID, pendingChildren: [], children: []};
         rootContainers.set(rootID, container);
-        root = NoopRenderer.createContainer(container, tag, false, null);
+        root = NoopRenderer.createContainer(container, tag, false, null, null);
         roots.set(rootID, root);
       }
       return root.current.stateNode.containerInfo;
@@ -740,6 +740,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         ConcurrentRoot,
         false,
         null,
+        null,
       );
       return {
         _Scheduler: Scheduler,
@@ -766,6 +767,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         LegacyRoot,
         false,
         null,
+        null,
       );
       return {
         _Scheduler: Scheduler,
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
@@ -422,12 +422,19 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
 
 export function createHostRootFiber(
   tag: RootTag,
+  isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
 ): Fiber {
   let mode;
   if (tag === ConcurrentRoot) {
     mode = ConcurrentMode;
-    if (enableStrictEffects && createRootStrictEffectsByDefault) {
+    if (isStrictMode === true) {
+      mode |= StrictLegacyMode;
+
+      if (enableStrictEffects) {
+        mode |= StrictEffectsMode;
+      }
+    } else if (enableStrictEffects && createRootStrictEffectsByDefault) {
       mode |= StrictLegacyMode | StrictEffectsMode;
     }
     if (
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
@@ -422,12 +422,19 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
 
 export function createHostRootFiber(
   tag: RootTag,
+  isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
 ): Fiber {
   let mode;
   if (tag === ConcurrentRoot) {
     mode = ConcurrentMode;
-    if (enableStrictEffects && createRootStrictEffectsByDefault) {
+    if (isStrictMode === true) {
+      mode |= StrictLegacyMode;
+
+      if (enableStrictEffects) {
+        mode |= StrictEffectsMode;
+      }
+    } else if (enableStrictEffects && createRootStrictEffectsByDefault) {
       mode |= StrictLegacyMode | StrictEffectsMode;
     }
     if (
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -248,13 +248,15 @@ export function createContainer(
   tag: RootTag,
   hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
+  isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
 ): OpaqueRoot {
   return createFiberRoot(
     containerInfo,
     tag,
     hydrate,
     hydrationCallbacks,
+    isStrictMode,
     concurrentUpdatesByDefaultOverride,
   );
 }
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -248,13 +248,15 @@ export function createContainer(
   tag: RootTag,
   hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
+  isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
 ): OpaqueRoot {
   return createFiberRoot(
     containerInfo,
     tag,
     hydrate,
     hydrationCallbacks,
+    isStrictMode,
     concurrentUpdatesByDefaultOverride,
   );
 }
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -98,6 +98,7 @@ export function createFiberRoot(
   tag: RootTag,
   hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
+  isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
 ): FiberRoot {
   const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);
@@ -109,6 +110,7 @@ export function createFiberRoot(
   // stateNode is any.
   const uninitializedFiber = createHostRootFiber(
     tag,
+    isStrictMode,
     concurrentUpdatesByDefaultOverride,
   );
   root.current = uninitializedFiber;
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -98,6 +98,7 @@ export function createFiberRoot(
   tag: RootTag,
   hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
+  isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
 ): FiberRoot {
   const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);
@@ -109,6 +110,7 @@ export function createFiberRoot(
   // stateNode is any.
   const uninitializedFiber = createHostRootFiber(
     tag,
+    isStrictMode,
     concurrentUpdatesByDefaultOverride,
   );
   root.current = uninitializedFiber;
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -58,6 +58,7 @@ const {IsSomeRendererActing} = ReactSharedInternals;
 type TestRendererOptions = {
   createNodeMock: (element: React$Element<any>) => any,
   unstable_isConcurrent: boolean,
+  unstable_strictMode: boolean,
   unstable_concurrentUpdatesByDefault: boolean,
   ...
 };
@@ -436,6 +437,7 @@ function propsMatch(props: Object, filter: Object): boolean {
 function create(element: React$Element<any>, options: TestRendererOptions) {
   let createNodeMock = defaultTestOptions.createNodeMock;
   let isConcurrent = false;
+  let isStrictMode = false;
   let concurrentUpdatesByDefault = null;
   if (typeof options === 'object' && options !== null) {
     if (typeof options.createNodeMock === 'function') {
@@ -444,6 +446,9 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
     if (options.unstable_isConcurrent === true) {
       isConcurrent = true;
     }
+    if (options.unstable_strictMode === true) {
+      isStrictMode = true;
+    }
     if (allowConcurrentByDefault) {
       if (options.unstable_concurrentUpdatesByDefault !== undefined) {
         concurrentUpdatesByDefault =
@@ -461,6 +466,7 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
     isConcurrent ? ConcurrentRoot : LegacyRoot,
     false,
     null,
+    isStrictMode,
     concurrentUpdatesByDefault,
   );
   invariant(root != null, 'something went wrong');
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.internal.js b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
@@ -65,6 +65,28 @@ describe('ReactStrictMode', () => {
     });
 
     if (__DEV__) {
+      // @gate experimental
+      it('should support enabling strict mode via createRoot option', () => {
+        act(() => {
+          const container = document.createElement('div');
+          const root = ReactDOM.createRoot(container, {
+            unstable_strictMode: true,
+          });
+          root.render(<Component label="A" />);
+        });
+
+        expect(log).toEqual([
+          'A: render',
+          'A: render',
+          'A: useLayoutEffect mount',
+          'A: useEffect mount',
+          'A: useLayoutEffect unmount',
+          'A: useEffect unmount',
+          'A: useLayoutEffect mount',
+          'A: useEffect mount',
+        ]);
+      });
+
       // @gate experimental
       it('should include legacy + strict effects mode', () => {
         act(() => {

Original file line number	Diff line number	Diff line change
`@@ -207,7 +207,7 @@ function render(`
`207`	`207`	`if (!root) {`
`208`	`208`	`// TODO (bvaughn): If we decide to keep the wrapper component,`
`209`	`209`	`// We could create a wrapper for containerTag as well to reduce special casing.`
`210`		`- root = createContainer(containerTag, LegacyRoot, false, null, null);`
	`210`	`+ root = createContainer(containerTag, LegacyRoot, false, null, false, null);`
`211`	`211`	`roots.set(containerTag, root);`
`212`	`212`	`}`
`213`	`213`	`updateContainer(element, root, null, callback);`
Original file line number	Diff line number	Diff line change
`@@ -203,7 +203,7 @@ function render(`
`203`	`203`	`if (!root) {`
`204`	`204`	`// TODO (bvaughn): If we decide to keep the wrapper component,`
`205`	`205`	`// We could create a wrapper for containerTag as well to reduce special casing.`
`206`		`- root = createContainer(containerTag, LegacyRoot, false, null, null);`
	`206`	`+ root = createContainer(containerTag, LegacyRoot, false, null, false, null);`
`207`	`207`	`roots.set(containerTag, root);`
`208`	`208`	`}`
`209`	`209`	`updateContainer(element, root, null, callback);`