Bug: Unable to use unmountComponentAtNode with unstable_createRoot

[Sawtaytoes]

When calling unmountComponentAtNode(document.getElementById('react-root')), it returns false.

This would normally happen because I'm trying to unmount something that's not a React node, but that's not the case.

I'm using unstable_createRoot. If I use render instead, it works fine.

React version: 0.0.0-experimental-79740da4c

Steps To Reproduce

1. Render component with unstable_createRoot.
2. Try to unmount the app with unmountComponentAtNode.

Link to code example: https://codesandbox.io/s/epic-leftpad-ih6ts?file=/src/index.js

The current behavior

Doesn't unmount the root React component.

The expected behavior

Should unmount the root React component.

[eps1lon]

unmountComponentAtNode only works with legacy roots i.e. ReactDOM.render.

For the new roots you have the method directly on the root:

const root = ReactDOM.unstable_createRoot(rootElement)
root.render(<App />);
root.unmount();

Does this work for you?

Edit:
Though for migration purposes an additional warning similar to

react/packages/react-dom/src/client/ReactDOMLegacy.js

Lines 345 to 354 in bd070eb

	if (__DEV__) {
	const isModernRoot =
	isContainerMarkedAsRoot(container) &&
	container._reactRootContainer === undefined;
	if (isModernRoot) {
	console.error(
	'You are calling ReactDOM.unmountComponentAtNode() on a container that was previously ' +
	'passed to ReactDOM.createRoot(). This is not supported. Did you mean to call root.unmount()?',
	);
	}

would be nice.

[Sawtaytoes]

Something like that would've saved me 2 hours tonight 😄. Definitely a reasonable solution.

I'd also say it should be on Reactjs.org:

This is the other place I checked:
https://reactjs.org/docs/concurrent-mode-adoption.html

[eps1lon]

I'd also say it should be on Reactjs.org:

Documentation for experimental is not updated frequently and not viable considering the nature of these release channels.

[gaearon]

If you do unmountComponentAtNode() on a node that was previously only passed to createRoot then it does warn already.
https://codesandbox.io/s/awesome-euclid-sqhz1?file=/src/index.js

The case where it doesn't is if you render first, then unmountComponentAtNode, then createRoot on the same node, and then unmountComponentAtNode. This seems a bit like an unlikely combination to me. I don't think this is worth fixing but if this comes up again, we'll do that.

[Sawtaytoes]

@gaearon It has an error message now :P.

I think the situation you're talking about with the "render > unmount > render > unmount" is what I ran into.

I was rendering a React component in Node-RED Dashboard which, if you update a node, re-runs your entrypoint in the dashboard. I was making sure to unmount before remounting, but it was still mounting and unmounting multiple times in the same page load.

I later changed this whole system to render the React app into an iframe using the srcdoc attribute so there was only ever one mount on a given root node.