a component is mounted twice

[michael8090]

bug

What is the current behavior?

For the same component, componentDidMount is called multiple times, without calling componentWillUnmount , when using ReactDOM.unmountComponentAtNode .

You can use the link below to reproduce it:

https://codesandbox.io/s/x76mlw16rp

What is the expected behavior?

componentWillUnmount should be called before calling componentDidMount again.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

16.x

[whs-dot-hk]

Oh, you mean world will unmount didn't appear in console in your context

Let me check it out why

[michael8090]

@whs-dot-hk Yes, world will unmount should be pared with world did mount.

[whs-dot-hk]

In your example <World /> didn't render into div

Try change ReactDOM.render(<World />, div) to

ReactDOM.render(<World />, div, () => console.log(div))

[gaearon]

Might be a bug, in which case you probably want to use portal as a workaround. In fact portals are a better way to do this anyway.

[michael8090]

In your example <World /> didn't render into div

Try change ReactDOM.render(<World />, div) to

ReactDOM.render(<World />, div, () => console.log(div))

World is just a component without any side effect, so you cannot see any child DOM element inside the div. But World does get rendered into div if you check out div._reactRootContainer._internalRoot.current.child.type.name, and you'll get the name "World".

[michael8090]

Might be a bug, in which case you probably want to use portal as a workaround. In fact portals are a better way to do this anyway.

Thanks for your suggestion.

Actually I'm using it to maintain another virtual DOM tree, which renders a webGL scene via side effects (life cycle hooks). So portal is not needed as we don't actually render DOM elements into another DOM node.

I can add a bit little more details here.

We create a webGL canvas in componentDidMount of World, and do some webGL redrawing in componentDidUpdate, and finally destroy the canvas in componentWillUnmount.

And as the calling order of the life cycle hooks is "componentDidMount -> componentDidUpdate -> componentDidMount -> componentDidUpdate -> componentDidMount -> ...", we just get many canvases.

[gaearon]

We want to support cross-renderer portals some day but yeah..

Wanna dig into what's happening?

[gaearon]

I would look for suspicious race conditions around here

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

Lines 681 to 688 in d3bbfe0

	// Unmount should not be batched.
	DOMRenderer.unbatchedUpdates(() => {
	legacyRenderSubtreeIntoContainer(null, null, container, false, () => {
	container._reactRootContainer = null;
	});
	});
	// If you call unmountComponentAtNode twice in quick succession, you'll
	// get `true` twice. That's probably fine?

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

Lines 524 to 550 in d3bbfe0

	// member of intersection type." Whyyyyyy.
	let root: Root = (container._reactRootContainer: any);
	if (!root) {
	// Initial mount
	root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
	container,
	forceHydrate,
	);
	if (typeof callback === 'function') {
	const originalCallback = callback;
	callback = function() {
	const instance = DOMRenderer.getPublicRootInstance(root._internalRoot);
	originalCallback.call(instance);
	};
	}
	// Initial mount should not be batched.
	DOMRenderer.unbatchedUpdates(() => {
	if (parentComponent != null) {
	root.legacy_renderSubtreeIntoContainer(
	parentComponent,
	children,
	callback,
	);
	} else {
	root.render(children, callback);
	}
	});

[michael8090]

Yes, I checked yesterday and saw the legacyRenderSubtreeIntoContainer scheduled an unmout task and the callback () => container._reactRootContainer = null was set, but the following forceUpdate(triggered by ReactDOM.unstable_batchedUpdates(() => this.refs.a.forceUpdate()) somehow cancelled the real unmount task without removing the callback (that's the root cause). The component did a regular update due to the forceUpdate, and the callback was called, resulting in the following updating logic thinking it was a fresh initial mount.

[michael8090]

It seems there are some strategies about merging the Updates in the UpdateQueue, do you know there they are?

[gaearon]

I'm not very familiar with this logic. But I'd expect the mistake to be related to race conditions in how this flag is set and read rather than in merging.

[whs-dot-hk]

@michael8090 Your code example is very specific you have setstate right after onclick

https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactUpdateQueue.js#L395-L397

said it returns prevstate

so i think this cause the back and fourth update and mount

[michael8090]

@whs-dot-hk

IMO calling setState inside onClick is a common way to update state, right?

Anyway, I got a simpler reproducing code: https://codesandbox.io/s/x76mlw16rp (and the issue desc is updated)

What happened in the code is:

1. clear the World in componentWillUnmount
2. render the World, clear it, and render it again in componentDidMount

And we can see World is mounted again, without unmounting.

To be specific, if we use ReactDOM.render(<React.Fragment />, div) instead of ReactDOM.unmountComponentAtNode(div) to clear World, everything is fine and World is updated rather than mounted/unmounted.