Skip to content

Commit

Permalink
Add component name to StrictMode error message (#25718)
Browse files Browse the repository at this point in the history
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
```
  • Loading branch information
sammy-SC authored Dec 2, 2022
1 parent 353c302 commit 500c8aa
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 2 deletions.
5 changes: 4 additions & 1 deletion packages/react-reconciler/src/ReactFiberClassUpdateQueue.js
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ import {
ShouldCapture,
DidCapture,
} from './ReactFiberFlags';
import getComponentNameFromFiber from './getComponentNameFromFiber';

import {debugRenderPhaseSideEffectsForStrictMode} from 'shared/ReactFeatureFlags';

Expand Down Expand Up @@ -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;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'});

Expand Down

0 comments on commit 500c8aa

Please sign in to comment.