React: Questions about unstable_createPortal

Created on 29 Nov 2016  路  5Comments  路  Source: facebook/react

I was talking to @vjeux about whether or not unstable_renderSubtreeIntoContainer will remain around, and he pointed me to the new/upcoming unstable_createPortal API. I've been using the former to render subtrees that I can move into Atom panes and panels (since I control the node I'm rendering the subtree into, I can move it around as I see fit).

So my two questions are:

  1. Will I continue to be able to move this DOM node wherever I want it? (E.g. not just attached to the document like most people do for modals)
  2. Will this continue to retain context into the subtree?

Most helpful comment

Note that createPortal is only available in Fiber so you won鈥檛 see it for a while.

We're not gonna remove unstable_renderSubtreeIntoContainer until then though! We have need for this too. :)

All 5 comments

Will I continue to be able to move this DOM node wherever I want it? (E.g. not just attached to the document like most people do for modals)

It will stay mounted as long as node reference is the same. If node reference changes, old portal gets unmounted, and a new one gets mounted.

Will this continue to retain context into the subtree?

Yes, that鈥檚 the primary purpose of this API (just like renderSubtree).

--

Note that createPortal is only available in Fiber so you won鈥檛 see it for a while.

Note that createPortal is only available in Fiber so you won鈥檛 see it for a while.

We're not gonna remove unstable_renderSubtreeIntoContainer until then though! We have need for this too. :)

It will stay mounted as long as node reference is the same. If node reference changes, old portal gets unmounted, and a new one gets mounted.

@gaearon So do I understand correctly that the ReactDOM method will return a DOM node to put wherever I want? That's even better as it may eliminate an extra container node.

No, you would still create and pass in a container. You would be able to move that container.

I'll close this since it isn't actionable for us but I hope we answered your questions. :) If not, please comment and I'll do my best to clarify.

Was this page helpful?
0 / 5 - 0 ratings