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.

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

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

Merged
merged 3 commits into from
Mar 18, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
110 changes: 110 additions & 0 deletions packages/react-dom/src/__tests__/ReactCompositeComponent-test.js
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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:

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

Copy link
Collaborator

@acdlite acdlite Mar 19, 2020

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
Original file line number Diff line number Diff line change
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
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 (`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
Original file line number Diff line number Diff line change
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