Bug:

[ClementEXWiki]

I'm having a very specific issue inside a complex project that I can't give a minimal reproduction example of.

Basically I mount a React component using createRoot(document.getElementByid('...')).render(<MyComponent />

For some reason, <MyComponent /> can end up being unmounted due to an error in one of its children.

I know that description is very vague, but do you have any idea what could cause the root element mounted using createRoot().render() to be unmounted? This would be very helpful to try to debug a more precise portion of the code I have.

I haven't found anything in the docs indicating that a component mounted using createRoot().render() could ever be unmounted without explicitly calling .unmount() (which I don't).

[maheshbhatiya73]

Hi! @ClementEXWiki , a React root created with createRoot(...).render() won't unmount on its own unless you explicitly call .unmount(). If your is disappearing or unmounting unexpectedly, here are some things to check:

Errors in Child Components: React's error boundaries catch render errors but do not automatically unmount the root. However, if an error is thrown and not caught, React might discard the whole render tree or remount it. Do you have any error boundaries? Consider adding one to isolate errors.

Strict Mode or Double Rendering: React 18+ Strict Mode can cause components to mount, unmount, and remount during development for detecting side effects. Could this explain the behavior?

External DOM Manipulation: Is something else in your app or a third-party script manipulating or removing the root DOM node?

Conditional Rendering: Check if your app logic conditionally renders nothing (null) or replaces the root element somewhere else in your code.

Multiple React Roots or Renders: Accidentally calling .render() multiple times on the same root or mounting multiple roots on the same container can cause confusing behavior.

[ClementEXWiki]

Hi, thanks for the quick answer!

I'm not using strict mode, but the root component does unmount when one of its descendants throws an obscure error. Why would React unmount the root in that case?

Nothing is touching the root, as it's explicitly only handled by a specific piece of code using private properties, in order to avoid interferences. There is no conditional rendering either in the root component.

The render method is not called multiple times either.

[HDAI654]

Can you share your code ?

[sonustar]

@ClementEXWiki according to my knowledge it might be happening due to child component issue like Suppose the DOM tree structure is Parent -> child1 -> child2 -> child3 and their is a issue in child2 component , Any issue in the component during runtime or React life cycle will automatically unmount from the actual DOM tree Structure .

For your second part , I will say React automatically unmounts the entire tree starting from the place of error ll the ay up to the root . Even if you didn't explicitly call .unmount() , Reaact internally cleans up the component tree to prevent inconsistent UI .

Suggestions : Give a error Boundary and check

[ClementEXWiki]

Can you share your code ?

I can technically share it, but it's a huge codebase with several dozens of thousands of lines of code, and when I extract the problematic component the issue disappears. The unmounting error is also random, it doesn't always happen, only sometimes. And I haven't been able to pinpoint where it comes from.

@ClementEXWiki according to my knowledge it might be happening due to child component issue like Suppose the DOM tree structure is Parent -> child1 -> child2 -> child3 and their is a issue in child2 component , Any issue in the component during runtime or React life cycle will automatically unmount from the actual DOM tree Structure .

For your second part , I will say React automatically unmounts the entire tree starting from the place of error ll the ay up to the root . Even if you didn't explicitly call .unmount() , Reaact internally cleans up the component tree to prevent inconsistent UI .

Suggestions : Give a error Boundary and check

The error definitely happens in a child component, I'll try adding an error boundary and report back, thanks for the suggestion :)

[HDAI654]

Can you share your code ?

I can technically share it, but it's a huge codebase with several dozens of thousands of lines of code, and when I extract the problematic component the issue disappears. The unmounting error is also random, it doesn't always happen, only sometimes. And I haven't been able to pinpoint where it comes from.

@ClementEXWiki according to my knowledge it might be happening due to child component issue like Suppose the DOM tree structure is Parent -> child1 -> child2 -> child3 and their is a issue in child2 component , Any issue in the component during runtime or React life cycle will automatically unmount from the actual DOM tree Structure .
For your second part , I will say React automatically unmounts the entire tree starting from the place of error ll the ay up to the root . Even if you didn't explicitly call .unmount() , Reaact internally cleans up the component tree to prevent inconsistent UI .
Suggestions : Give a error Boundary and check

The error definitely happens in a child component, I'll try adding an error boundary and report back, thanks for the suggestion :)

Based on my experience, major and unusual errors like this typically originate from minor bugs or issues, either in your code or in React's code.