Skip to content

improve error message for cross-functional component updates #18316

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Mar 16, 2020
Merged

improve error message for cross-functional component updates #18316

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
67f5732
improve error message for cross-functional component updates
JoviDeCroock Mar 15, 2020
c28ebf9
correctly use %s by quoting it
JoviDeCroock Mar 15, 2020
4940d97
use workInProgress and lint
JoviDeCroock Mar 15, 2020
ca4128c
add test assertion
JoviDeCroock Mar 15, 2020
bed3eb9
fix test
JoviDeCroock Mar 15, 2020
e81ae47
Improve the error message
gaearon Mar 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Improve the error message
  • Loading branch information
@gaearon
gaearon committed Mar 16, 2020
commit e81ae47ebf7feade0db9c6216b48823d8d399379
30 changes: 23 additions & 7 deletions packages/react-reconciler/src/ReactFiberWorkLoop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2909,20 +2909,36 @@ if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
}

let didWarnAboutUpdateInRender = false;
let didWarnAboutUpdateInRenderForAnotherComponent;
if (__DEV__) {
didWarnAboutUpdateInRenderForAnotherComponent = new Set();
}

function warnAboutRenderPhaseUpdatesInDEV(fiber) {
if (__DEV__) {
if ((executionContext & RenderContext) !== NoContext) {
switch (fiber.tag) {
case FunctionComponent:
case ForwardRef:
case SimpleMemoComponent: {
console.error(
'Cannot update a component from inside the function body of a ' +
'different component.\n' +
'"%s" updated "%s".',
workInProgress && getComponentName(workInProgress.type),
getComponentName(fiber.type),
);
const renderingComponentName =
(workInProgress && getComponentName(workInProgress.type)) ||
'Unknown';
const setStateComponentName =
getComponentName(fiber.type) || 'Unknown';
const dedupeKey =
renderingComponentName + ' ' + setStateComponentName;
if (!didWarnAboutUpdateInRenderForAnotherComponent.has(dedupeKey)) {
didWarnAboutUpdateInRenderForAnotherComponent.add(dedupeKey);
console.error(
'Cannot update a component (`%s`) from inside the function body of a ' +
'different component (`%s`). To locate the bad setState() call inside `%s`, ' +
'follow the stack trace as described in https://fb.me/setstate-in-render',
setStateComponentName,
renderingComponentName,
renderingComponentName,
);
}
break;
}
case ClassComponent: {
Expand Down
6 changes: 3 additions & 3 deletions packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1087,7 +1087,7 @@ describe('ReactHooks', () => {
),
).toErrorDev([
'Context can only be read while React is rendering',
'Cannot update a component from inside the function body of a different component.\n"Cls" updated "Fn".',
'Cannot update a component (`Fn`) from inside the function body of a different component (`Cls`).',
]);
});

Expand Down Expand Up @@ -1783,8 +1783,8 @@ describe('ReactHooks', () => {
if (__DEV__) {
expect(console.error).toHaveBeenCalledTimes(2);
expect(console.error.calls.argsFor(0)[0]).toContain(
'Warning: Cannot update a component from inside the function body ' +
'of a different component.\n"%s" updated "%s".%s',
'Warning: Cannot update a component (`%s`) from inside the function body ' +
'of a different component (`%s`).',
);
}
});
Expand Down
17 changes: 14 additions & 3 deletions packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.internal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -412,7 +412,7 @@ describe('ReactHooksWithNoopRenderer', () => {

function Bar({triggerUpdate}) {
if (triggerUpdate) {
setStep(1);
setStep(x => x + 1);
}
return <Text text="Bar" />;
}
Expand Down Expand Up @@ -440,10 +440,21 @@ describe('ReactHooksWithNoopRenderer', () => {
expect(() =>
expect(Scheduler).toFlushAndYield(['Foo [0]', 'Bar', 'Foo [1]']),
).toErrorDev([
'Cannot update a component from inside the function body of a ' +
'different component.\n"Bar" updated "Foo".',
'Cannot update a component (`Foo`) from inside the function body of a ' +
'different component (`Bar`). To locate the bad setState() call inside `Bar`',
]);
});

// It should not warn again (deduplication).
await ReactNoop.act(async () => {
root.render(
<>
<Foo />
<Bar triggerUpdate={true} />
</>,
);
expect(Scheduler).toFlushAndYield(['Foo [1]', 'Bar', 'Foo [2]']);
});
});

it('keeps restarting until there are no more new updates', () => {
Expand Down