Skip to content
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

Jump to bottom

improve error message for cross-functional component updates #18316

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 all commits
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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
27 changes: 23 additions & 4 deletions packages/react-reconciler/src/ReactFiberWorkLoop.js
View file
Open in desktop
Expand Up @@ -2909,17 +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.',
);
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
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.',
'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.%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
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.',
'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