React: createPortal fails silently if used outside or render method

Created on 19 Apr 2018  路  3Comments  路  Source: facebook/react

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.

Most helpful comment

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

All 3 comments

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.

Was this page helpful?
0 / 5 - 0 ratings