Add useModernStrictMode as dynamic flag on www (#28346)

## Summary

Preparing modern strict mode rollout with dynamic feature flag

## How did you test this change?

![Screenshot 2024-02-15 at 10 09
49 AM](https:/facebook/react/assets/8965173/9e90efc2-3578-4e63-ae2c-63d4a4e194b3)

DiffTrain build for [ef72271](ef72271)

compiled/facebook-www/JSXDEVRuntime-dev.classic.js

@@ -109,7 +109,8 @@ if (__DEV__) {
 
  var enableDebugTracing = dynamicFeatureFlags.enableDebugTracing,
  enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
- enableRenderableContext = dynamicFeatureFlags.enableRenderableContext; // On WWW, false is used for a new modern build.
+ enableRenderableContext = dynamicFeatureFlags.enableRenderableContext;
+ // On WWW, false is used for a new modern build.
 
  var REACT_CLIENT_REFERENCE$2 = Symbol.for("react.client.reference");
  function isValidElementType(type) {

compiled/facebook-www/JSXDEVRuntime-dev.modern.js

@@ -109,7 +109,8 @@ if (__DEV__) {
 
  var enableDebugTracing = dynamicFeatureFlags.enableDebugTracing,
  enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
- enableRenderableContext = dynamicFeatureFlags.enableRenderableContext; // On WWW, true is used for a new modern build.
+ enableRenderableContext = dynamicFeatureFlags.enableRenderableContext;
+ // On WWW, true is used for a new modern build.
 
  var REACT_CLIENT_REFERENCE$2 = Symbol.for("react.client.reference");
  function isValidElementType(type) {

compiled/facebook-www/REVISION

@@ -1 +1 @@
-a9cc32511a12c261ee719e5383818182800d6af4
+ef72271c2d1234c9d1e1358f8083021089a50faa

compiled/facebook-www/React-dev.classic.js

@@ -24,7 +24,7 @@ if (__DEV__) {
  ) {
  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
  }
- var ReactVersion = "18.3.0-www-classic-77843590";
+ var ReactVersion = "18.3.0-www-classic-435f93e8";
 
  // ATTENTION
  // When adding new symbols to this file,
@@ -475,7 +475,8 @@ if (__DEV__) {
 
  var enableDebugTracing = dynamicFeatureFlags.enableDebugTracing,
  enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
- enableRenderableContext = dynamicFeatureFlags.enableRenderableContext; // On WWW, false is used for a new modern build.
+ enableRenderableContext = dynamicFeatureFlags.enableRenderableContext;
+ // On WWW, false is used for a new modern build.
 
  function getWrappedName(outerType, innerType, wrapperName) {
  var displayName = outerType.displayName;

compiled/facebook-www/React-dev.modern.js

@@ -24,7 +24,7 @@ if (__DEV__) {
  ) {
  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
  }
- var ReactVersion = "18.3.0-www-modern-0bb55f38";
+ var ReactVersion = "18.3.0-www-modern-d64ea480";
 
  // ATTENTION
  // When adding new symbols to this file,
@@ -475,7 +475,8 @@ if (__DEV__) {
 
  var enableDebugTracing = dynamicFeatureFlags.enableDebugTracing,
  enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
- enableRenderableContext = dynamicFeatureFlags.enableRenderableContext; // On WWW, true is used for a new modern build.
+ enableRenderableContext = dynamicFeatureFlags.enableRenderableContext;
+ // On WWW, true is used for a new modern build.
 
  function getWrappedName(outerType, innerType, wrapperName) {
  var displayName = outerType.displayName;

compiled/facebook-www/React-prod.classic.js

@@ -618,4 +618,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
  return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-www-classic-707cd731";
+exports.version = "18.3.0-www-classic-863536b2";

compiled/facebook-www/React-prod.modern.js

@@ -610,4 +610,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
  return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-www-modern-f4321f8c";
+exports.version = "18.3.0-www-modern-19268851";

compiled/facebook-www/ReactART-dev.classic.js

@@ -66,7 +66,7 @@ if (__DEV__) {
  return self;
  }
 
- var ReactVersion = "18.3.0-www-classic-fc548c7d";
+ var ReactVersion = "18.3.0-www-classic-162b9b5d";
 
  var LegacyRoot = 0;
  var ConcurrentRoot = 1;
@@ -187,7 +187,8 @@ if (__DEV__) {
  dynamicFeatureFlags.transitionLaneExpirationMs,
  enableInfiniteRenderLoopDetection =
  dynamicFeatureFlags.enableInfiniteRenderLoopDetection,
- enableRenderableContext = dynamicFeatureFlags.enableRenderableContext; // On WWW, false is used for a new modern build.
+ enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+ useModernStrictMode = dynamicFeatureFlags.useModernStrictMode; // On WWW, false is used for a new modern build.
  var enableProfilerTimer = true;
  var enableProfilerCommitHooks = true;
  var enableProfilerNestedUpdatePhase = true;
@@ -28106,9 +28107,121 @@ if (__DEV__) {
  }
  }
 
+ function recursivelyTraverseAndDoubleInvokeEffectsInDEV(
+ root,
+ parentFiber,
+ isInStrictMode
+ ) {
+ if (
+ (parentFiber.subtreeFlags & (PlacementDEV | Visibility)) ===
+ NoFlags$1
+ ) {
+ // Parent's descendants have already had effects double invoked.
+ // Early exit to avoid unnecessary tree traversal.
+ return;
+ }
+
+ var child = parentFiber.child;
+
+ while (child !== null) {
+ doubleInvokeEffectsInDEVIfNecessary(root, child, isInStrictMode);
+ child = child.sibling;
+ }
+ } // Unconditionally disconnects and connects passive and layout effects.
+
+ function doubleInvokeEffectsOnFiber(root, fiber) {
+ var shouldDoubleInvokePassiveEffects =
+ arguments.length > 2 && arguments[2] !== undefined
+ ? arguments[2]
+ : true;
+ disappearLayoutEffects(fiber);
+
+ if (shouldDoubleInvokePassiveEffects) {
+ disconnectPassiveEffect(fiber);
+ }
+
+ reappearLayoutEffects(root, fiber.alternate, fiber, false);
+
+ if (shouldDoubleInvokePassiveEffects) {
+ reconnectPassiveEffects(root, fiber, NoLanes, null, false);
+ }
+ }
+
+ function doubleInvokeEffectsInDEVIfNecessary(
+ root,
+ fiber,
+ parentIsInStrictMode
+ ) {
+ var isStrictModeFiber = fiber.type === REACT_STRICT_MODE_TYPE;
+ var isInStrictMode = parentIsInStrictMode || isStrictModeFiber; // First case: the fiber **is not** of type OffscreenComponent. No
+ // special rules apply to double invoking effects.
+
+ if (fiber.tag !== OffscreenComponent) {
+ if (fiber.flags & PlacementDEV) {
+ setCurrentFiber(fiber);
+
+ if (isInStrictMode) {
+ doubleInvokeEffectsOnFiber(
+ root,
+ fiber,
+ (fiber.mode & NoStrictPassiveEffectsMode) === NoMode
+ );
+ }
+
+ resetCurrentFiber();
+ } else {
+ recursivelyTraverseAndDoubleInvokeEffectsInDEV(
+ root,
+ fiber,
+ isInStrictMode
+ );
+ }
+
+ return;
+ } // Second case: the fiber **is** of type OffscreenComponent.
+ // This branch contains cases specific to Offscreen.
+
+ if (fiber.memoizedState === null) {
+ // Only consider Offscreen that is visible.
+ // TODO (Offscreen) Handle manual mode.
+ setCurrentFiber(fiber);
+
+ if (isInStrictMode && fiber.flags & Visibility) {
+ // Double invoke effects on Offscreen's subtree only
+ // if it is visible and its visibility has changed.
+ doubleInvokeEffectsOnFiber(root, fiber);
+ } else if (fiber.subtreeFlags & PlacementDEV) {
+ // Something in the subtree could have been suspended.
+ // We need to continue traversal and find newly inserted fibers.
+ recursivelyTraverseAndDoubleInvokeEffectsInDEV(
+ root,
+ fiber,
+ isInStrictMode
+ );
+ }
+
+ resetCurrentFiber();
+ }
+ }
+
  function commitDoubleInvokeEffectsInDEV(root, hasPassiveEffects) {
  {
- {
+ if (useModernStrictMode && root.tag !== LegacyRoot) {
+ var doubleInvokeEffects = true;
+
+ if (
+ root.tag === ConcurrentRoot &&
+ !(root.current.mode & (StrictLegacyMode | StrictEffectsMode))
+ ) {
+ doubleInvokeEffects = false;
+ }
+
+ recursivelyTraverseAndDoubleInvokeEffectsInDEV(
+ root,
+ root.current,
+ doubleInvokeEffects
+ );
+ } else {
  legacyCommitDoubleInvokeEffectsInDEV(root.current, hasPassiveEffects);
  }
  }

compiled/facebook-www/ReactART-dev.modern.js

@@ -66,7 +66,7 @@ if (__DEV__) {
  return self;
  }
 
- var ReactVersion = "18.3.0-www-modern-cdfb5e55";
+ var ReactVersion = "18.3.0-www-modern-4bc0b3fd";
 
  var LegacyRoot = 0;
  var ConcurrentRoot = 1;
@@ -187,7 +187,8 @@ if (__DEV__) {
  dynamicFeatureFlags.transitionLaneExpirationMs,
  enableInfiniteRenderLoopDetection =
  dynamicFeatureFlags.enableInfiniteRenderLoopDetection,
- enableRenderableContext = dynamicFeatureFlags.enableRenderableContext; // On WWW, true is used for a new modern build.
+ enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+ useModernStrictMode = dynamicFeatureFlags.useModernStrictMode; // On WWW, true is used for a new modern build.
  var enableProfilerTimer = true;
  var enableProfilerCommitHooks = true;
  var enableProfilerNestedUpdatePhase = true;
@@ -27756,9 +27757,121 @@ if (__DEV__) {
  }
  }
 
+ function recursivelyTraverseAndDoubleInvokeEffectsInDEV(
+ root,
+ parentFiber,
+ isInStrictMode
+ ) {
+ if (
+ (parentFiber.subtreeFlags & (PlacementDEV | Visibility)) ===
+ NoFlags$1
+ ) {
+ // Parent's descendants have already had effects double invoked.
+ // Early exit to avoid unnecessary tree traversal.
+ return;
+ }
+
+ var child = parentFiber.child;
+
+ while (child !== null) {
+ doubleInvokeEffectsInDEVIfNecessary(root, child, isInStrictMode);
+ child = child.sibling;
+ }
+ } // Unconditionally disconnects and connects passive and layout effects.
+
+ function doubleInvokeEffectsOnFiber(root, fiber) {
+ var shouldDoubleInvokePassiveEffects =
+ arguments.length > 2 && arguments[2] !== undefined
+ ? arguments[2]
+ : true;
+ disappearLayoutEffects(fiber);
+
+ if (shouldDoubleInvokePassiveEffects) {
+ disconnectPassiveEffect(fiber);
+ }
+
+ reappearLayoutEffects(root, fiber.alternate, fiber, false);
+
+ if (shouldDoubleInvokePassiveEffects) {
+ reconnectPassiveEffects(root, fiber, NoLanes, null, false);
+ }
+ }
+
+ function doubleInvokeEffectsInDEVIfNecessary(
+ root,
+ fiber,
+ parentIsInStrictMode
+ ) {
+ var isStrictModeFiber = fiber.type === REACT_STRICT_MODE_TYPE;
+ var isInStrictMode = parentIsInStrictMode || isStrictModeFiber; // First case: the fiber **is not** of type OffscreenComponent. No
+ // special rules apply to double invoking effects.
+
+ if (fiber.tag !== OffscreenComponent) {
+ if (fiber.flags & PlacementDEV) {
+ setCurrentFiber(fiber);
+
+ if (isInStrictMode) {
+ doubleInvokeEffectsOnFiber(
+ root,
+ fiber,
+ (fiber.mode & NoStrictPassiveEffectsMode) === NoMode
+ );
+ }
+
+ resetCurrentFiber();
+ } else {
+ recursivelyTraverseAndDoubleInvokeEffectsInDEV(
+ root,
+ fiber,
+ isInStrictMode
+ );
+ }
+
+ return;
+ } // Second case: the fiber **is** of type OffscreenComponent.
+ // This branch contains cases specific to Offscreen.
+
+ if (fiber.memoizedState === null) {
+ // Only consider Offscreen that is visible.
+ // TODO (Offscreen) Handle manual mode.
+ setCurrentFiber(fiber);
+
+ if (isInStrictMode && fiber.flags & Visibility) {
+ // Double invoke effects on Offscreen's subtree only
+ // if it is visible and its visibility has changed.
+ doubleInvokeEffectsOnFiber(root, fiber);
+ } else if (fiber.subtreeFlags & PlacementDEV) {
+ // Something in the subtree could have been suspended.
+ // We need to continue traversal and find newly inserted fibers.
+ recursivelyTraverseAndDoubleInvokeEffectsInDEV(
+ root,
+ fiber,
+ isInStrictMode
+ );
+ }
+
+ resetCurrentFiber();
+ }
+ }
+
  function commitDoubleInvokeEffectsInDEV(root, hasPassiveEffects) {
  {
- {
+ if (useModernStrictMode && root.tag !== LegacyRoot) {
+ var doubleInvokeEffects = true;
+
+ if (
+ root.tag === ConcurrentRoot &&
+ !(root.current.mode & (StrictLegacyMode | StrictEffectsMode))
+ ) {
+ doubleInvokeEffects = false;
+ }
+
+ recursivelyTraverseAndDoubleInvokeEffectsInDEV(
+ root,
+ root.current,
+ doubleInvokeEffects
+ );
+ } else {
  legacyCommitDoubleInvokeEffectsInDEV(root.current, hasPassiveEffects);
  }
  }