Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

createPortal fails silently if used outside or render method #12653

Closed
yantakus opened this issue Apr 19, 2018 · 3 comments
Closed

createPortal fails silently if used outside or render method #12653

yantakus opened this issue Apr 19, 2018 · 3 comments

Comments

@yantakus
Copy link

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.

@gaearon
Copy link
Collaborator

gaearon commented Apr 19, 2018

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.

@gaearon gaearon closed this as completed Apr 19, 2018
@gaearon
Copy link
Collaborator

gaearon commented Apr 19, 2018

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!

@bharath063
Copy link

bharath063 commented May 8, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants