Deduplicated many warnings (#11140)

*  Deduplicated the following warnings:

1.  Can only update a mounted or mounting component.
    This usually means you called setState, replaceState,
    or forceUpdate on an unmounted component. This is a no-op

2.  %s.componentWillReceiveProps(): Assigning directly to
    this.state is deprecated (except inside a component's
    constructor). Use setState instead.'

3.  An update (setState, replaceState, or forceUpdate) was scheduled
    from inside an update function. Update functions should be pure,
    with zero side-effects. Consider using componentDidUpdate or a
    callback.

4.  setState(...): Cannot call setState() inside getChildContext()

* Code review changes made for #11140

packages/react-dom/src/server/ReactPartialRenderer.js

@@ -72,6 +72,7 @@ if (__DEV__) {
  var {ReactDebugCurrentFrame} = require('shared/ReactGlobalSharedState');
  var currentDebugStack = null;
  var currentDebugElementStack = null;
+ var didWarnAboutNoopUpdateForComponent = {};
  var setCurrentDebugStack = function(stack: Array<Frame>) {
  var frame: Frame = stack[stack.length - 1];
  currentDebugElementStack = ((frame: any): FrameDev).debugElementStack;
@@ -175,15 +176,23 @@ function warnNoop(
 ) {
  if (__DEV__) {
  var constructor = publicInstance.constructor;
+ const componentName =
+ (constructor && getComponentName(constructor)) || 'ReactClass';
+ const warningKey = `${callerName}_${componentName}`;
+ if (didWarnAboutNoopUpdateForComponent[warningKey]) {
+ return;
+ }
+
  warning(
  false,
  '%s(...): Can only update a mounting component. ' +
  'This usually means you called %s() outside componentWillMount() on the server. ' +
  'This is a no-op.\n\nPlease check the code for the %s component.',
  callerName,
  callerName,
- (constructor && getComponentName(constructor)) || 'ReactClass',
+ componentName,
  );
+ didWarnAboutNoopUpdateForComponent[warningKey] = true;
  }
 }
 

packages/react-reconciler/src/ReactFiberClassComponent.js

@@ -41,6 +41,7 @@ if (__DEV__) {
  var warning = require('fbjs/lib/warning');
 
  var {startPhaseTimer, stopPhaseTimer} = require('./ReactDebugFiberPerf');
+ var didWarnAboutStateAssignmentForComponent = {};
 
  var warnOnInvalidCallback = function(callback: mixed, callerName: string) {
  warning(
@@ -393,13 +394,17 @@ module.exports = function(
 
  if (instance.state !== oldState) {
  if (__DEV__) {
- warning(
- false,
- '%s.componentWillReceiveProps(): Assigning directly to ' +
- "this.state is deprecated (except inside a component's " +
- 'constructor). Use setState instead.',
- getComponentName(workInProgress),
- );
+ const componentName = getComponentName(workInProgress) || 'Component';
+ if (!didWarnAboutStateAssignmentForComponent[componentName]) {
+ warning(
+ false,
+ '%s.componentWillReceiveProps(): Assigning directly to ' +
+ "this.state is deprecated (except inside a component's " +
+ 'constructor). Use setState instead.',
+ componentName,
+ );
+ didWarnAboutStateAssignmentForComponent[componentName] = true;
+ }
  }
  updater.enqueueReplaceState(instance, instance.state, null);
  }

packages/react-reconciler/src/ReactFiberScheduler.js

@@ -101,41 +101,50 @@ if (__DEV__) {
  } = require('./ReactDebugFiberPerf');
 
  var didWarnAboutStateTransition = false;
+ var didWarnSetStateChildContext = false;
+ var didWarnStateUpdateForUnmountedComponent = {};
+
+ var warnAboutUpdateOnUnmounted = function(fiber: Fiber) {
+ const componentName = getComponentName(fiber) || 'ReactClass';
+ if (didWarnStateUpdateForUnmountedComponent[componentName]) {
+ return;
+ }
 
- var warnAboutUpdateOnUnmounted = function(
- instance: React$ComponentType<any>,
- ) {
- const ctor = instance.constructor;
  warning(
  false,
- 'Can only update a mounted or mounting component. This usually means ' +
- 'you called setState, replaceState, or forceUpdate on an unmounted ' +
- 'component. This is a no-op.\n\nPlease check the code for the ' +
- '%s component.',
- (ctor && (ctor.displayName || ctor.name)) || 'ReactClass',
+ 'Can only update a mounted or mounting ' +
+ 'component. This usually means you called setState, replaceState, ' +
+ 'or forceUpdate on an unmounted component. This is a no-op.\n\nPlease ' +
+ 'check the code for the %s component.',
+ componentName,
  );
+ didWarnStateUpdateForUnmountedComponent[componentName] = true;
  };
 
  var warnAboutInvalidUpdates = function(instance: React$ComponentType<any>) {
  switch (ReactDebugCurrentFiber.phase) {
  case 'getChildContext':
+ if (didWarnSetStateChildContext) {
+ return;
+ }
  warning(
  false,
  'setState(...): Cannot call setState() inside getChildContext()',
  );
+ didWarnSetStateChildContext = true;
  break;
  case 'render':
  if (didWarnAboutStateTransition) {
  return;
  }
- didWarnAboutStateTransition = true;
  warning(
  false,
  'Cannot update during an existing state transition (such as within ' +
  "`render` or another component's constructor). Render methods should " +
  'be a pure function of props and state; constructor side-effects are ' +
  'an anti-pattern, but can be moved to `componentWillMount`.',
  );
+ didWarnAboutStateTransition = true;
  break;
  }
  };
@@ -1229,7 +1238,7 @@ module.exports = function<T, P, I, TI, PI, C, CC, CX, PL>(
  } else {
  if (__DEV__) {
  if (!isErrorRecovery && fiber.tag === ClassComponent) {
- warnAboutUpdateOnUnmounted(fiber.stateNode);
+ warnAboutUpdateOnUnmounted(fiber);
  }
  }
  return;

packages/react-reconciler/src/ReactFiberUpdateQueue.js

@@ -20,6 +20,7 @@ const {NoWork} = require('./ReactFiberExpirationTime');
 
 if (__DEV__) {
  var warning = require('fbjs/lib/warning');
+ var didWarnUpdateInsideUpdate = false;
 }
 
 type PartialState<State, Props> =
@@ -132,14 +133,18 @@ function insertUpdateIntoFiber<State>(
 
  // Warn if an update is scheduled from inside an updater function.
  if (__DEV__) {
- if (queue1.isProcessing || (queue2 !== null && queue2.isProcessing)) {
+ if (
+ (queue1.isProcessing || (queue2 !== null && queue2.isProcessing)) &&
+ !didWarnUpdateInsideUpdate
+ ) {
  warning(
  false,
  'An update (setState, replaceState, or forceUpdate) was scheduled ' +
  'from inside an update function. Update functions should be pure, ' +
  'with zero side-effects. Consider using componentDidUpdate or a ' +
  'callback.',
  );
+ didWarnUpdateInsideUpdate = true;
  }
  }
 

packages/react/src/ReactNoopUpdateQueue.js

@@ -9,21 +9,29 @@
 
 if (__DEV__) {
  var warning = require('fbjs/lib/warning');
+ var didWarnStateUpdateForUnmountedComponent = {};
 }
 
 function warnNoop(publicInstance, callerName) {
  if (__DEV__) {
  var constructor = publicInstance.constructor;
+ const componentName =
+ (constructor && (constructor.displayName || constructor.name)) ||
+ 'ReactClass';
+ const warningKey = `${callerName}_${componentName}`;
+ if (didWarnStateUpdateForUnmountedComponent[warningKey]) {
+ return;
+ }
  warning(
  false,
  '%s(...): Can only update a mounted or mounting component. ' +
  'This usually means you called %s() on an unmounted component. ' +
  'This is a no-op.\n\nPlease check the code for the %s component.',
  callerName,
  callerName,
- (constructor && (constructor.displayName || constructor.name)) ||
- 'ReactClass',
+ componentName,
  );
+ didWarnStateUpdateForUnmountedComponent[warningKey] = true;
  }
 }