Opt into unsafe lifecycle warnings without async tree

packages/react-reconciler/src/ReactFiber.js

@@ -30,7 +30,11 @@ import {
 import getComponentName from 'shared/getComponentName';
 
 import {NoWork} from './ReactFiberExpirationTime';
-import {NoContext, AsyncUpdates} from './ReactTypeOfInternalContext';
+import {
+  NoContext,
+  AsyncUpdates,
+  StrictMode,
+} from './ReactTypeOfInternalContext';
 import {
   REACT_FRAGMENT_TYPE,
   REACT_RETURN_TYPE,
@@ -293,7 +297,7 @@ export function createWorkInProgress(
 }
 
 export function createHostRootFiber(isAsync): Fiber {
-  const internalContextTag = isAsync ? AsyncUpdates : NoContext;
+  const internalContextTag = isAsync ? AsyncUpdates | StrictMode : NoContext;
   return createFiber(HostRoot, null, null, internalContextTag);
 }
 

packages/react-reconciler/src/ReactFiberClassComponent.js

@@ -16,7 +16,7 @@ import {
   enableAsyncSubtreeAPI,
   warnAboutDeprecatedLifecycles,
 } from 'shared/ReactFeatureFlags';
-import ReactDebugAsyncWarnings from './ReactDebugAsyncWarnings';
+import ReactStrictModeWarnings from './ReactStrictModeWarnings';
 import {isMounted} from 'react-reconciler/reflection';
 import * as ReactInstanceMap from 'shared/ReactInstanceMap';
 import emptyObject from 'fbjs/lib/emptyObject';
@@ -26,7 +26,7 @@ import invariant from 'fbjs/lib/invariant';
 import warning from 'fbjs/lib/warning';
 
 import {startPhaseTimer, stopPhaseTimer} from './ReactDebugFiberPerf';
-import {AsyncUpdates} from './ReactTypeOfInternalContext';
+import {AsyncUpdates, StrictMode} from './ReactTypeOfInternalContext';
 import {
   cacheContext,
   getMaskedContext,
@@ -639,20 +639,23 @@ export default function(
     instance.refs = emptyObject;
     instance.context = getMaskedContext(workInProgress, unmaskedContext);
 
-    if (
-      enableAsyncSubtreeAPI &&
-      workInProgress.type != null &&
-      workInProgress.type.prototype != null &&
-      workInProgress.type.prototype.unstable_isAsyncReactComponent === true
-    ) {
-      workInProgress.internalContextTag |= AsyncUpdates;
+    if (workInProgress.type != null && workInProgress.type.prototype != null) {
+      const prototype = workInProgress.type.prototype;
+
+      if (enableAsyncSubtreeAPI) {
+        if (prototype.unstable_isAsyncReactComponent === true) {
+          workInProgress.internalContextTag |= AsyncUpdates;
+        }
+      }
+
+      if (prototype.__reactStrictMode === true) {
+        workInProgress.internalContextTag |= StrictMode;
+      }
     }
 
     if (__DEV__) {
-      // If we're inside of an async sub-tree,
-      // Warn about any unsafe lifecycles on this class component.
-      if (workInProgress.internalContextTag & AsyncUpdates) {
-        ReactDebugAsyncWarnings.recordLifecycleWarnings(
+      if (workInProgress.internalContextTag & StrictMode) {
+        ReactStrictModeWarnings.recordLifecycleWarnings(
           workInProgress,
           instance,
         );

packages/react-reconciler/src/ReactFiberScheduler.js

@@ -16,7 +16,7 @@ import type {ExpirationTime} from './ReactFiberExpirationTime';
 import {getStackAddendumByWorkInProgressFiber} from 'shared/ReactFiberComponentTreeHook';
 import ReactErrorUtils from 'shared/ReactErrorUtils';
 import {ReactCurrentOwner} from 'shared/ReactGlobalSharedState';
-import ReactDebugAsyncWarnings from './ReactDebugAsyncWarnings';
+import ReactStrictModeWarnings from './ReactStrictModeWarnings';
 import {
   PerformedWork,
   Placement,
@@ -312,7 +312,7 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
 
   function commitAllLifeCycles() {
     if (__DEV__) {
-      ReactDebugAsyncWarnings.flushPendingAsyncWarnings();
+      ReactStrictModeWarnings.flushPendingAsyncWarnings();
     }
 
     while (nextEffect !== null) {
@@ -657,7 +657,7 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
 
   function performFailedUnitOfWork(workInProgress: Fiber): Fiber | null {
     if (__DEV__) {
-      ReactDebugAsyncWarnings.discardPendingWarnings();
+      ReactStrictModeWarnings.discardPendingWarnings();
     }
 
     // The current, flushed, state of this fiber is the alternate.

packages/react-reconciler/src/ReactDebugAsyncWarnings.js → packages/react-reconciler/src/ReactStrictModeWarnings.js

@@ -11,7 +11,7 @@ import type {Fiber} from './ReactFiber';
 
 import getComponentName from 'shared/getComponentName';
 import {getStackAddendumByWorkInProgressFiber} from 'shared/ReactFiberComponentTreeHook';
-import {AsyncUpdates} from './ReactTypeOfInternalContext';
+import {StrictMode} from './ReactTypeOfInternalContext';
 import warning from 'fbjs/lib/warning';
 
 type LIFECYCLE =
@@ -21,7 +21,7 @@ type LIFECYCLE =
 type LifecycleToComponentsMap = {[lifecycle: LIFECYCLE]: Array<Fiber>};
 type FiberToLifecycleMap = Map<Fiber, LifecycleToComponentsMap>;
 
-const ReactDebugAsyncWarnings = {
+const ReactStrictModeWarnings = {
   discardPendingWarnings(): void {},
   flushPendingAsyncWarnings(): void {},
   recordLifecycleWarnings(fiber: Fiber, instance: any): void {},
@@ -39,13 +39,13 @@ if (__DEV__) {
   // Tracks components we have already warned about.
   const didWarnSet = new Set();
 
-  ReactDebugAsyncWarnings.discardPendingWarnings = () => {
+  ReactStrictModeWarnings.discardPendingWarnings = () => {
     pendingWarningsMap = new Map();
   };
 
-  ReactDebugAsyncWarnings.flushPendingAsyncWarnings = () => {
+  ReactStrictModeWarnings.flushPendingAsyncWarnings = () => {
     ((pendingWarningsMap: any): FiberToLifecycleMap).forEach(
-      (lifecycleWarningsMap, asyncRoot) => {
+      (lifecycleWarningsMap, strictRoot) => {
         const lifecyclesWarningMesages = [];
 
         Object.keys(lifecycleWarningsMap).forEach(lifecycle => {
@@ -71,17 +71,17 @@ if (__DEV__) {
         });
 
         if (lifecyclesWarningMesages.length > 0) {
-          const asyncRootComponentStack = getStackAddendumByWorkInProgressFiber(
-            asyncRoot,
+          const strictRootComponentStack = getStackAddendumByWorkInProgressFiber(
+            strictRoot,
           );
 
           warning(
             false,
-            'Unsafe lifecycle methods were found within the following async tree:%s' +
+            'Unsafe lifecycle methods were found within a strict-mode tree:%s' +
               '\n\n%s' +
               '\n\nLearn more about this warning here:' +
-              '\nhttps://fb.me/react-async-component-lifecycle-hooks',
-            asyncRootComponentStack,
+              '\nhttps://fb.me/react-strict-mode-warnings',
+            strictRootComponentStack,
             lifecyclesWarningMesages.join('\n\n'),
           );
         }
@@ -91,25 +91,25 @@ if (__DEV__) {
     pendingWarningsMap = new Map();
   };
 
-  const getAsyncRoot = (fiber: Fiber): Fiber => {
-    let maybeAsyncRoot = null;
+  const getStrictRoot = (fiber: Fiber): Fiber => {
+    let maybeStrictRoot = null;
 
     while (fiber !== null) {
-      if (fiber.internalContextTag & AsyncUpdates) {
-        maybeAsyncRoot = fiber;
+      if (fiber.internalContextTag & StrictMode) {
+        maybeStrictRoot = fiber;
       }
 
       fiber = fiber.return;
     }
 
-    return maybeAsyncRoot;
+    return maybeStrictRoot;
   };
 
-  ReactDebugAsyncWarnings.recordLifecycleWarnings = (
+  ReactStrictModeWarnings.recordLifecycleWarnings = (
     fiber: Fiber,
     instance: any,
   ) => {
-    const asyncRoot = getAsyncRoot(fiber);
+    const strictRoot = getStrictRoot(fiber);
 
     // Dedup strategy: Warn once per component.
     // This is difficult to track any other way since component names
@@ -121,16 +121,16 @@ if (__DEV__) {
     }
 
     let warningsForRoot;
-    if (!pendingWarningsMap.has(asyncRoot)) {
+    if (!pendingWarningsMap.has(strictRoot)) {
       warningsForRoot = {
         UNSAFE_componentWillMount: [],
         UNSAFE_componentWillReceiveProps: [],
         UNSAFE_componentWillUpdate: [],
       };
 
-      pendingWarningsMap.set(asyncRoot, warningsForRoot);
+      pendingWarningsMap.set(strictRoot, warningsForRoot);
     } else {
-      warningsForRoot = pendingWarningsMap.get(asyncRoot);
+      warningsForRoot = pendingWarningsMap.get(strictRoot);
     }
 
     const unsafeLifecycles = [];
@@ -163,4 +163,4 @@ if (__DEV__) {
   };
 }
 
-export default ReactDebugAsyncWarnings;
+export default ReactStrictModeWarnings;

packages/react-reconciler/src/ReactTypeOfInternalContext.js

@@ -9,5 +9,6 @@
 
 export type TypeOfInternalContext = number;
 
-export const NoContext = 0;
-export const AsyncUpdates = 1;
+export const NoContext = 0b00000000;
+export const AsyncUpdates = 0b00000001;
+export const StrictMode = 0b00000010;

packages/react/src/React.js

@@ -9,7 +9,12 @@ import assign from 'object-assign';
 import ReactVersion from 'shared/ReactVersion';
 import {REACT_FRAGMENT_TYPE} from 'shared/ReactSymbols';
 
-import {Component, PureComponent, AsyncComponent} from './ReactBaseClasses';
+import {
+  AsyncComponent,
+  Component,
+  PureComponent,
+  StrictMode,
+} from './ReactBaseClasses';
 import {forEach, map, count, toArray, only} from './ReactChildren';
 import ReactCurrentOwner from './ReactCurrentOwner';
 import {
@@ -36,6 +41,7 @@ const React = {
 
   Component,
   PureComponent,
+  StrictMode,
   unstable_AsyncComponent: AsyncComponent,
 
   Fragment: REACT_FRAGMENT_TYPE,

packages/react/src/ReactBaseClasses.js

@@ -117,34 +117,32 @@ if (__DEV__) {
   }
 }
 
+function ComponentDummy() {}
+ComponentDummy.prototype = Component.prototype;
+
 /**
- * Base class helpers for the updating state of a component.
+ * Convenience component with default shallow equality check for sCU.
  */
 function PureComponent(props, context, updater) {
-  // Duplicated from Component.
   this.props = props;
   this.context = context;
   this.refs = emptyObject;
-  // We initialize the default updater but the real one gets injected by the
-  // renderer.
   this.updater = updater || ReactNoopUpdateQueue;
 }
 
-function ComponentDummy() {}
-ComponentDummy.prototype = Component.prototype;
 const pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());
 pureComponentPrototype.constructor = PureComponent;
 // Avoid an extra prototype jump for these methods.
 Object.assign(pureComponentPrototype, Component.prototype);
 pureComponentPrototype.isPureReactComponent = true;
 
+/**
+ * Special component type that opts subtree into async rendering mode.
+ */
 function AsyncComponent(props, context, updater) {
-  // Duplicated from Component.
   this.props = props;
   this.context = context;
   this.refs = emptyObject;
-  // We initialize the default updater but the real one gets injected by the
-  // renderer.
   this.updater = updater || ReactNoopUpdateQueue;
 }
 
@@ -153,8 +151,30 @@ asyncComponentPrototype.constructor = AsyncComponent;
 // Avoid an extra prototype jump for these methods.
 Object.assign(asyncComponentPrototype, Component.prototype);
 asyncComponentPrototype.unstable_isAsyncReactComponent = true;
+asyncComponentPrototype.__reactStrictMode = true;
 asyncComponentPrototype.render = function() {
   return this.props.children;
 };
 
-export {Component, PureComponent, AsyncComponent};
+/**
+ * Special component type that enables forward-looking, advanced warnings.
+ * For examples, it detects async-unsafe lifecycles (without actually enabling async mode).
+ * It can also detect render-phase side effects by double-invoking certain methods.
+ */
+function StrictMode(props, context, updater) {
+  this.props = props;
+  this.context = context;
+  this.refs = emptyObject;
+  this.updater = updater || ReactNoopUpdateQueue;
+}
+
+const strictModePrototype = (StrictMode.prototype = new ComponentDummy());
+strictModePrototype.constructor = StrictMode;
+// Avoid an extra prototype jump for these methods.
+Object.assign(strictModePrototype, Component.prototype);
+strictModePrototype.__reactStrictMode = true;
+strictModePrototype.render = function() {
+  return this.props.children;
+};
+
+export {AsyncComponent, Component, PureComponent, StrictMode};