I updated a package to work with react 16.3.2. unstable_renderSubtreeIntoContainer was used there. When I replaced it with createPortal, nothing happened and no errors were displayed. I wasted several hours to understand that unstable_renderSubtreeIntoContainer could be used anywhere, for example in componentDidUpdate (as it was in my case). But createPortal can be used only in render. So it would be great to have a warning when it is used outside render to let people know what they are doing wrong. And maybe consider adding a note on this in the docs. Thanks.
createPortal can be used outside of render in some rare (but legitimate) cases, but you're right it won't do anything unless eventually the produced value is a part of the render result.
It's no different from how JSX and createElement() works in this sense. We don't have a warning like this for JSX (because again, there are rare but legitimate reasons to do it) so I don't think special casing portals makes sense here.
If the docs aren't clear please raise an issue in https://github.com/reactjs/reactjs.org or send a PR to improve them. Thank you!
@gaearon , How would one use createPortal outside render?
My use case is very similar to this comment. I have a vanilla JS library that generates DOM Nodes by parsing a JSON object. I've used refs to provide a div as a mount point for the library. Also the library allows it's render method to be extended to render custom elements. I'm using a React Component library to render a few of those custom elements. How do I attach the child nodes that are being rendered by the library to be a part of the main react tree? I've tried using unstable_renderSubtreeIntoContainer. Apart from being deprecated/not officially supported, the react objects created during the custom element rendering using unstable_renderSubtreeIntoContainer don't seem to be getting destroyed even though the parent react element gets destroyed. The DOM nodes are getting destroyed though.
Most helpful comment
@gaearon , How would one use
createPortaloutside render?My use case is very similar to this comment. I have a vanilla JS library that generates DOM Nodes by parsing a JSON object. I've used
refsto provide adivas a mount point for the library. Also the library allows it's render method to be extended to render custom elements. I'm using a React Component library to render a few of those custom elements. How do I attach the child nodes that are being rendered by the library to be a part of the main react tree? I've tried usingunstable_renderSubtreeIntoContainer. Apart from being deprecated/not officially supported, the react objects created during the custom element rendering usingunstable_renderSubtreeIntoContainerdon't seem to be getting destroyed even though the parent react element gets destroyed. The DOM nodes are getting destroyed though.