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

Don't fire the render phase update warning for class lifecycles #18330

Merged
merged 3 commits into from Mar 18, 2020
Merged

Don't fire the render phase update warning for class lifecycles #18330

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
537919d
Change the warning to not say "function body"
gaearon Mar 17, 2020
959b279
Dedupe by the rendering component
gaearon Mar 17, 2020
933157f
Don't warn outside of render
gaearon Mar 17, 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
110 changes: 110 additions & 0 deletions packages/react-dom/src/__tests__/ReactCompositeComponent-test.js
View file
Open in desktop
Expand Up @@ -1749,4 +1749,114 @@ describe('ReactCompositeComponent', () => {
ReactDOM.render(<Shadow />, container);
expect(container.firstChild.tagName).toBe('DIV');
});

it('should not warn on updating function component from componentWillMount', () => {
let _setState;
function A() {
_setState = React.useState()[1];
return null;
}
class B extends React.Component {
UNSAFE_componentWillMount() {
_setState({});
}
render() {
return null;
}
}
function Parent() {
return (
<div>
<A />
<B />
</div>
);
}
const container = document.createElement('div');
ReactDOM.render(<Parent />, container);
});

it('should not warn on updating function component from componentWillUpdate', () => {
let _setState;
function A() {
_setState = React.useState()[1];
return null;
}
class B extends React.Component {
UNSAFE_componentWillUpdate() {
_setState({});
}
render() {
return null;
}
}
function Parent() {
return (
<div>
<A />
<B />
</div>
);
}
const container = document.createElement('div');
ReactDOM.render(<Parent />, container);
ReactDOM.render(<Parent />, container);
});

it('should not warn on updating function component from componentWillReceiveProps', () => {
let _setState;
function A() {
_setState = React.useState()[1];
return null;
}
class B extends React.Component {
UNSAFE_componentWillReceiveProps() {
_setState({});
}
render() {
return null;
}
}
function Parent() {
return (
<div>
<A />
<B />
</div>
);
}
const container = document.createElement('div');
ReactDOM.render(<Parent />, container);
ReactDOM.render(<Parent />, container);
});

it('should warn on updating function component from render', () => {
let _setState;
function A() {
_setState = React.useState()[1];
return null;
}
class B extends React.Component {
render() {
_setState({});
return null;
}
}
function Parent() {
return (
<div>
<A />
<B />
</div>
);
}
const container = document.createElement('div');
expect(() => {
ReactDOM.render(<Parent />, container);
}).toErrorDev(
'Cannot update a component (`A`) while rendering a different component (`B`)',
);
// Dedupe.
ReactDOM.render(<Parent />, container);
});
});
2 changes: 2 additions & 0 deletions packages/react-reconciler/src/ReactFiberBeginWork.js
View file
Open in desktop
Expand Up @@ -1363,6 +1363,7 @@ function mountIndeterminateComponent(
ReactStrictModeWarnings.recordLegacyContextWarning(workInProgress, null);
}

setIsRendering(true);
ReactCurrentOwner.current = workInProgress;
value = renderWithHooks(
null,
Expand All @@ -1372,6 +1373,7 @@ function mountIndeterminateComponent(
context,
renderExpirationTime,
);
setIsRendering(false);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the component throws, setIsRendering won't be reset. This needs to be reset in the the work loop. Here:

react/packages/react-reconciler/src/ReactFiberWorkLoop.js

Lines 1226 to 1229 in 8311cb5

// Reset module-level state that was set during the render phase.
resetContextDependencies();
resetHooksAfterThrow();
resetCurrentDebugFiberInDEV();

Copy link
Collaborator

@acdlite acdlite Mar 19, 2020 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Never mind, gets reset by resetCurrentDebugFiberInDEV

} else {
value = renderWithHooks(
null,
Expand Down
22 changes: 11 additions & 11 deletions packages/react-reconciler/src/ReactFiberWorkLoop.js
View file
Open in desktop
Expand Up @@ -2927,22 +2927,25 @@ if (__DEV__) {

function warnAboutRenderPhaseUpdatesInDEV(fiber) {
if (__DEV__) {
if ((executionContext & RenderContext) !== NoContext) {
if (
ReactCurrentDebugFiberIsRenderingInDEV &&
(executionContext & RenderContext) !== NoContext
) {
switch (fiber.tag) {
case FunctionComponent:
case ForwardRef:
case SimpleMemoComponent: {
const renderingComponentName =
(workInProgress && getComponentName(workInProgress.type)) ||
'Unknown';
const setStateComponentName =
getComponentName(fiber.type) || 'Unknown';
const dedupeKey =
renderingComponentName + ' ' + setStateComponentName;
// Dedupe by the rendering component because it's the one that needs to be fixed.
const dedupeKey = renderingComponentName;
if (!didWarnAboutUpdateInRenderForAnotherComponent.has(dedupeKey)) {
didWarnAboutUpdateInRenderForAnotherComponent.add(dedupeKey);
const setStateComponentName =
getComponentName(fiber.type) || 'Unknown';
console.error(
'Cannot update a component (`%s`) from inside the function body of a ' +
'Cannot update a component (`%s`) while rendering 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,
Expand All @@ -2953,18 +2956,15 @@ function warnAboutRenderPhaseUpdatesInDEV(fiber) {
break;
}
case ClassComponent: {
if (
ReactCurrentDebugFiberIsRenderingInDEV &&
!didWarnAboutUpdateInRender
) {
if (!didWarnAboutUpdateInRender) {
console.error(
'Cannot update during an existing state transition (such as ' +
'within `render`). Render methods should be a pure ' +
'function of props and state.',
);
didWarnAboutUpdateInRender = true;
break;
}
break;
}
}
}
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 (`Fn`) from inside the function body of a different component (`Cls`).',
'Cannot update a component (`Fn`) while rendering 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 (`%s`) from inside the function body ' +
'of a different component (`%s`).',
'Warning: Cannot update a component (`%s`) while rendering ' +
'a different component (`%s`).',
);
}
});
Expand Down
2 changes: 1 addition & 1 deletion packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.internal.js
View file
Open in desktop
Expand Up @@ -440,7 +440,7 @@ describe('ReactHooksWithNoopRenderer', () => {
expect(() =>
expect(Scheduler).toFlushAndYield(['Foo [0]', 'Bar', 'Foo [1]']),
).toErrorDev([
'Cannot update a component (`Foo`) from inside the function body of a ' +
'Cannot update a component (`Foo`) while rendering a ' +
'different component (`Bar`). To locate the bad setState() call inside `Bar`',
]);
});
Expand Down