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( 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'});