Bug: Unable to use unmountComponentAtNode with unstable_createRoot #21441

Activity

1. Sawtaytoes

   added

   Status: UnconfirmedA potential issue that we haven't yet confirmed as a bugA potential issue that we haven't yet confirmed as a bug

   on May 6, 2021
2. eps1lon commented on May 6, 2021

   

   eps1lon

   on May 6, 2021

   Last edited by eps1lon

   Collaborator

   More actions

   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 https://github.com/facebook/react/blob/bd070eb2c489a1f758e4a55b193820af7346fa15/packages/react-dom/src/client/ReactDOMLegacy.js#L345-L354 would be nice.

   👍React with 👍1Reacted by Kevin Ghadyani
3. eps1lon

   added

   Component: DOM

   Type: Enhancement

   on May 6, 2021
4. Sawtaytoes commented on May 6, 2021

   

   Sawtaytoes

   on May 6, 2021

   Last edited by Sawtaytoes

   Author

   More actions

   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
5. eps1lon commented on May 6, 2021

   

   eps1lon

   on May 6, 2021

   Collaborator

   More actions

   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.

   👍React with 👍1Reacted by Kevin Ghadyani
6. gaearon commented on Jun 23, 2021

   

   gaearon

   on Jun 23, 2021

   Last edited by gaearon

   Collaborator

   More actions

   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.
7. gaearon

   closed this as completedon Jun 23, 2021
8. Sawtaytoes commented on Jun 23, 2021

   

   Sawtaytoes

   on Jun 23, 2021

   Last edited by Sawtaytoes

   Author

   More actions

   @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.

   👍React with 👍1Reacted by dan