From 500c8aa0828b1c1f73e957b99bbe0e0f9b08aac5 Mon Sep 17 00:00:00 2001
From: Samuel Susla <samuel.susla@gmail.com>
Date: Fri, 2 Dec 2022 17:14:12 +0000
Subject: [PATCH] Add component name to StrictMode error message (#25718)

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
```
---
 packages/react-reconciler/src/ReactFiberClassUpdateQueue.js  | 5 ++++-
 .../src/__tests__/ReactIncrementalUpdates-test.js            | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.js b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.js
index 1b3897029522e..fa2de881dd59a 100644
--- 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
index 454a0399b9a52..4d667b0ab6707 100644
--- 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'});