Add component name to StrictMode error message (#25718)

sammy-SC · web-flow · commit 500c8aa0828b · 2022-12-02T17:14:12.000Z
The error message to warn user about state update coming from inside an
update function does not contain name of the offending component. Other
warnings StrictMode has, always have offending component mentioned in
top level error message.


Previous error message:
```
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.
```

New error message:
```
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.

Please update the following component: Foo
```
diff --git a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.js b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.js
@@ -108,6 +108,7 @@ import {
   ShouldCapture,
   DidCapture,
 } from './ReactFiberFlags';
+import getComponentNameFromFiber from './getComponentNameFromFiber';
 
 import {debugRenderPhaseSideEffectsForStrictMode} from 'shared/ReactFeatureFlags';
 
@@ -239,11 +240,13 @@ export function enqueueUpdate<State>(
       currentlyProcessingQueue === sharedQueue &&
       !didWarnUpdateInsideUpdate
     ) {
+      const componentName = getComponentNameFromFiber(fiber);
       console.error(
         '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.',
+          'callback.\n\nPlease update the following component: %s',
+        componentName,
       );
       didWarnUpdateInsideUpdate = true;
     }
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
@@ -474,7 +474,7 @@ describe('ReactIncrementalUpdates', () => {
       '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.',
+        'callback.\n\nPlease update the following component: Foo',
     );
     expect(instance.state).toEqual({a: 'a', b: 'b'});
 
