Add more warnings for second argument to root.render. (#23358)

We already had one for callbacks but containers is also an easy mistake.
This commit is contained in:
Sebastian Markbåge 2022-02-24 16:31:48 -05:00 committed by GitHub
parent 8c4cd65cfa
commit 68cb55f262
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 0 deletions

View File

@ -51,6 +51,37 @@ describe('ReactDOMRoot', () => {
expect(callback).not.toHaveBeenCalled();
});
it('warn if a container is passed to root.render(...)', async () => {
function App() {
return 'Child';
}
const root = ReactDOM.createRoot(container);
expect(() => root.render(<App />, {})).toErrorDev(
'You passed a second argument to root.render(...) but it only accepts ' +
'one argument.',
{
withoutStack: true,
},
);
});
it('warn if a container is passed to root.render(...)', async () => {
function App() {
return 'Child';
}
const root = ReactDOM.createRoot(container);
expect(() => root.render(<App />, container)).toErrorDev(
'You passed a container to the second argument of root.render(...). ' +
"You don't need to pass it again since you already passed it to create " +
'the root.',
{
withoutStack: true,
},
);
});
it('warns if a callback parameter is provided to unmount', () => {
const callback = jest.fn();
const root = ReactDOM.createRoot(container);

View File

@ -104,7 +104,18 @@ ReactDOMHydrationRoot.prototype.render = ReactDOMRoot.prototype.render = functio
'render(...): does not support the second callback argument. ' +
'To execute a side effect after rendering, declare it in a component body with useEffect().',
);
} else if (isValidContainer(arguments[1])) {
console.error(
'You passed a container to the second argument of root.render(...). ' +
"You don't need to pass it again since you already passed it to create the root.",
);
} else if (typeof arguments[1] !== 'undefined') {
console.error(
'You passed a second argument to root.render(...) but it only accepts ' +
'one argument.',
);
}
const container = root.containerInfo;
if (container.nodeType !== COMMENT_NODE) {