Handle OutPortal updates between portal nodes

Previously, OutPortal could happily unmount and remount nodes,
and switch between them if there was an unmount en route,
but it would crash if we switched directly, because the
previous node wasn't unmounted first.

Author: pimterry

src/index.tsx

@@ -120,6 +120,7 @@ type OutPortalProps<C extends Component<any>> = {
 export class OutPortal<C extends Component<any>> extends React.PureComponent<OutPortalProps<C>> {
 
     private placeholderNode = React.createRef<HTMLDivElement>();
+    private currentPortalNode?: PortalNode<C>;
 
     constructor(props: OutPortalProps<C>) {
         super(props);
@@ -133,6 +134,7 @@ export class OutPortal<C extends Component<any>> extends React.PureComponent<Out
 
     componentDidMount() {
         const node = this.props.node as PortalNode<C>;
+        this.currentPortalNode = node;
 
         const placeholder = this.placeholderNode.current!;
         const parent = placeholder.parentNode!;
@@ -144,6 +146,13 @@ export class OutPortal<C extends Component<any>> extends React.PureComponent<Out
         // We re-mount on update, just in case we were unmounted (e.g. by
         // a second OutPortal, which has now been removed)
         const node = this.props.node as PortalNode<C>;
+
+        // If we're switching portal nodes, we need to clean up the current one first.
+        if (this.currentPortalNode && node !== this.currentPortalNode) {
+            this.currentPortalNode.unmount();
+            this.currentPortalNode = node;
+        }
+
         const placeholder = this.placeholderNode.current!;
         const parent = placeholder.parentNode!;
         node.mount(parent, placeholder);

stories/index.stories.js

@@ -145,6 +145,45 @@ storiesOf('Portals', module)
             </div>
         });
     })
+    .add('can switch between portals safely', () => {
+        const portalNode1 = portals.createPortalNode();
+        const portalNode2 = portals.createPortalNode();
+
+        const Counter = () => {
+            const [count, setCount] = React.useState(0);
+
+            return <div>
+                Count is { count }
+                <button onClick={() => setCount(count + 1)}>
+                    +1
+                </button>
+            </div>;
+        };
+
+        return React.createElement(() => {
+            const [isPortalSwitched, switchPortal] = React.useState(false);
+
+            let portalNode = isPortalSwitched ? portalNode2 : portalNode1;
+
+            return <div>
+                <portals.InPortal node={portalNode1}>
+                    <Counter />
+                </portals.InPortal>
+                <portals.InPortal node={portalNode2}>
+                    <Counter />
+                </portals.InPortal>
+
+                <button onClick={() => switchPortal(!isPortalSwitched)}>
+                    Click to swap the portal shown
+                </button>
+
+                <hr/>
+
+                <p>Inner OutPortal:</p>
+                <portals.OutPortal node={portalNode} />
+            </div>
+        });
+    })
     .add('renders reliably, even with frequent changes and multiple portals', () => {
         const portalNode = portals.createPortalNode('div');