
Using React 16 to open new window with shared state - TimMeade
https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202
======
euroclydon
This is a bad idea for any serious app. I inherited a framework that did this,
and it performed terribly. Not to mention, it’s an exercise in discovering
browser edge cases you would have otherwise never had to worry about. Use
postMessage or localStorage to communicate between windows. Don’t use window
handles.

~~~
kimjongman
I will block react with ublock

~~~
dymk
Ok

------
amelius
It's probably just me, but I don't get what is cool about rendering in another
window. Also, I generally don't like it if an app uses more than one window,
so I'm not sure what this is useful for.

~~~
onirom
Can be useful when you have multiple monitors and don't want to clutter the
main window, especially for single page apps or visualization/monitoring
things.

I have done my own take at this since some times but vanilla only
[https://github.com/grz0zrg/wui](https://github.com/grz0zrg/wui) where any of
the dialog widget can be detached off the main window keeping the same content
& state. A feature i never saw in any web apps but saw often on desktop apps,
nice to see that some peoples think of this sort of thing with cleaner
approach!

~~~
vanderZwan
> Can be useful when you have multiple monitors and don't want to clutter the
> main window, especially for single page apps or visualization/monitoring
> things.

Yep, this is precisely the use-case I would have for this in loom-viewer[0], a
SPA data viewer I'm developing for the Loom file format[1] (think large
genomic data matrices + metadata). It has a lot of scatter plots and bar
charts, and for people with multiple monitors using a separate window as a
pop-out would be quite beneficial. It also would make it easier to _print_ out
the graphs (which I find silly, but it's a thing researchers do).

I've looked at golden-layout before, but it doesn't play nice with redux at
the moment[1]. Since I'm already on React 16 this might be what I'm looking
for.

[0] [http://loom.linnarssonlab.org/](http://loom.linnarssonlab.org/)

[1] [http://loompy.org/](http://loompy.org/)

[2] [http://golden-layout.com/](http://golden-layout.com/)

~~~
acemarke
Hi, I'm a Redux maintainer. Could you clarify what you mean by "doesn't play
nice with Redux"?

~~~
vanderZwan
Hi!

Well, note that I say that golden-layout does not play nice with Redux, not
the other way around. It's not Redux being problematic here, as far as I can
tell.

There's an open issue on their github repo asking for examples of how to
integrate it:

[https://github.com/deepstreamIO/golden-
layout/issues/280](https://github.com/deepstreamIO/golden-layout/issues/280)

Maybe things have improved since I've last looked at it, but when I tried a
few months ago, it seemed like it would require quite a bit of change in my
code to get it up and running

By comparison, this new React 16 solution looks like it's a lot simpler to
integrate in my existing code.

------
gurgus
It's a really cool read. I thought it was neat and a bit more elegant than
doing something similar with Window.postMessage
([https://developer.mozilla.org/en-
US/docs/Web/API/Window/post...](https://developer.mozilla.org/en-
US/docs/Web/API/Window/postMessage)).

------
tlrobinson
This was always possible in React. I used it to render the redux-devtools in
its own window (before there was a browser plugin):
[https://gist.github.com/tlrobinson/1e63d15d3e5f33410ef7](https://gist.github.com/tlrobinson/1e63d15d3e5f33410ef7)

~~~
timdorr
That's establishing a separate component tree. This is one single component
tree, hosted in the parent window. That was never possible until portals
landed.

~~~
pygy_
You could have it like this:

    
    
        <Parent>
          <MyPortal root={element}>
            <h1>Howdy!</h1>
          </MyPortal>
        </Parent>
    

Where MyPortal actually renders its children in another element. Single
component tree, multiple DOM roots. What portals add is the propagation of
events through the portal.

~~~
pygy_
I'm out of my edit window, so here's an example of what I mean:

[https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAG...](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvAHgBMIA3AAgjYF4sGCGgB8LAPQdOogDpp2XXgIAOtAE7EMUcVK5y08kAF8K6bLkQEAVgip0GTYnjABXNNWIR63AAoatKAgALxgAChV1WhU4AEpuYHlubgAlGAxPABEAeQBZfHUmNhh1CKiY-
GpCaDZCtApuSOi4AtpaYlik7kLiV3U0bjRXKCh5Y3l5Nw8vHwBBVwAPbjLm+MSB7phe-
sbylqqauoBuMZPDD3o4Ym5Cbn5U9M9KwoxGAFFYHAYJtCnPbwGKTaxDCay6PT6A0IYXmCwaQxGFC6yWhAHIVKj4cMoA1USJuEIRKjYkiNslkTcwv5NNoQjAGsAou1EI0AtpTBSUWF0ZjBtjcfi1DSoMTSclkiSup00ONzmkMsQcvk6sVStCge0SQThGhpSYzCBMDg8JU4HYaPRGMwrNJEBgwIx1AkugAjDIAawA5lF3GwALR0KAaFkAd2qjDOyRdGlVLIATColmx2ow2Js2JHuNH1Kq-
eoMBxXHAWQBGAAMibOXQcVuILNexFKfFiVY2YCDrxZ6ggnpImbAlr9IZgPZILOjUAzXRUBY4aE9LLL3HLlbGP2kzo22dj3AAzInuHBaEE04Up1uYyU8wWIEXSxWFpnqLAMOpx+1CJmhOpPSJ76uNhnNg5wXZcHzOWUTAAXSoII0HdBAUHMY0rBeJ5ik4GAgxUL5iHwWxKBAPpyCsEhiBiRAJAkdwVC9SpaCwCQ0OIAABEsADZ8BLfAy2orA2CYx48IwrDolw-
DzWIABPFRLBAAjTGQuTmL9ZMsHwETsPEgiqGIvAyIoqiaLouhGJUtS2M47jeNcfjBIVVSGI0mBMK0pwJMI6TZLwBSoOMIA)

------
microcolonel
This interacts poorly with the built-in script blocking in chrome. You can't
enable JavaScript in the about:blank window, so the buttons in it don't do
anything. This is a pretty serious issue.

Probably more of a chrome bug though I guess, it should inherit script
blocking from the spawning page.

------
atonse
Ah this is cool, like ember-wormhole in the ember world!

How were React devs doing modals, etc before?

~~~
kccqzy
Just use ReactDOM.render into a separate, top-level <div> that is usually
empty. And then have the close button of the modal call
ReactDOM.unmountComponentAtNode.

Alternatively, don't bother with all of this and just mount the modal into
your children. Use CSS `position: absolute/fixed` to position it. Of course
this assumes your ancestor elements don't have certain properties like
`position: relative` or `transform` set, but this is usually not a problem.

~~~
teniutza
A pop-up can be dragged onto a second monitor, for example, whereas a modal
cannot.

~~~
kccqzy
OP was asking about how to do modals, not comparing a modal vs a pop-up.

------
evan_
Another reason you might want to use this technique is to render something
into an iframe

------
MentallyRetired
Could this be exploited for state rehydration across multiple tabs?

------
hellofunk
How are portals implemented? Are they using broadcastchannel API or
postmessage, etc, to communicate between the windows in the same app?

------
collyw
React 16?

Anglar 1 was around for a while. There was a big fuss about Angular 2 being
incompatible, and before I have had a chance to look at it, we are on Angular
4.

Now we are on React 16.

As if the JavaScript ecosystem wasn't bad enough, we now seem have an extra
problem of completely silly release numbers. (I do 80% back end work, but in
this day and age its hard not to use JavaScript. I took an interest in these
frameworks a couple of years back and didn't gt much chance to follow up since
then. Version numbering like this discourage me from finding out more.)

~~~
stevehawk
honestly just caused me to realize I'm not even positive what version my last
react app was in.. I thought I was 'current' but I know it was a single digit
number so I guess I wasn't.

~~~
collyw
If it's backward compatible, its not so bad, but whole number releases usually
imply that there will be some breaking changes (or they do to me at least).

