@samitouri / QOS-React-2 / commits / 500c8aa082

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 ```

Samuel Susla committed Dec 2, 2022 at 17:14 UTC 500c8aa0828b1c1f73e957b99bbe0e0f9b08aac5

2 files changed +5 -2

packages/react-reconciler/src/ReactFiberClassUpdateQueue.js

+4 -1

@@ -108,6 +108,7 @@ import {

108 ShouldCapture,

109 DidCapture,

110 } from './ReactFiberFlags';

111 +import getComponentNameFromFiber from './getComponentNameFromFiber';

112

113 import {debugRenderPhaseSideEffectsForStrictMode} from 'shared/ReactFeatureFlags';

114

@@ -239,11 +240,13 @@ export function enqueueUpdate<State>(

240 currentlyProcessingQueue === sharedQueue &&

241 !didWarnUpdateInsideUpdate

242 ) {

243 + const componentName = getComponentNameFromFiber(fiber);

244 console.error(

245 'An update (setState, replaceState, or forceUpdate) was scheduled ' +

246 'from inside an update function. Update functions should be pure, ' +

247 'with zero side-effects. Consider using componentDidUpdate or a ' +

246 - 'callback.',

248 + 'callback.\n\nPlease update the following component: %s',

249 + componentName,

250 );

251 didWarnUpdateInsideUpdate = true;

252 }

packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js

+1 -1

@@ -474,7 +474,7 @@ describe('ReactIncrementalUpdates', () => {

474 'An update (setState, replaceState, or forceUpdate) was scheduled ' +

475 'from inside an update function. Update functions should be pure, ' +

476 'with zero side-effects. Consider using componentDidUpdate or a ' +

477 - 'callback.',

477 + 'callback.\n\nPlease update the following component: Foo',

478 );

479 expect(instance.state).toEqual({a: 'a', b: 'b'});

480