More reliably handle race conditions in mount/unmount

The portal now directly owns its own mounting into the DOM, so
can guarantee that it's in the right place, and always tidied
up when its moved into a new place. In addition, we now handle
various funky & racey cases, including updating when duplicate
OutPortals are removed, and overlapping portal mountings.

Author: pimterry

src/index.tsx

@@ -11,6 +11,12 @@ export interface PortalNode<C extends Component<any> = Component<any>> extends H
     setPortalProps(p: ComponentProps<C>): void;
     // Used to track props set before the InPortal hooks setPortalProps
     getInitialPortalProps(): ComponentProps<C>;
+    // Move the node from wherever it is, to this parent, replacing the placeholder
+    mount(newParent: Node, placeholder: Node): void;
+    // If mounted, unmount the node and put the initial placeholder back
+    // If an expected placeholder is provided, only unmount if that's still that was the
+    // latest placeholder we replaced. This avoids some race conditions.
+    unmount(expectedPlaceholder?: Node): void;
 }
 
 interface InPortalProps {
@@ -20,14 +26,52 @@ interface InPortalProps {
 
 export const createPortalNode = <C extends Component<any>>(): PortalNode<C> => {
     let initialProps = {} as ComponentProps<C>;
-    return Object.assign(document.createElement('div'), {
+
+    let parent: Node | undefined;
+    let lastPlaceholder: Node | undefined;
+
+    const portalNode = Object.assign(document.createElement('div'), {
         setPortalProps: (props: ComponentProps<C>) => {
             initialProps = props;
         },
         getInitialPortalProps: () => {
             return initialProps;
+        },
+        mount: (newParent: Node, newPlaceholder: Node) => {
+            if (newPlaceholder === lastPlaceholder) {
+                // Already mounted - noop.
+                return;
+            }
+            portalNode.unmount();
+
+            newParent.replaceChild(
+                portalNode,
+                newPlaceholder
+            );
+
+            parent = newParent;
+            lastPlaceholder = newPlaceholder;
+        },
+        unmount: (expectedPlaceholder?: Node) => {
+            if (expectedPlaceholder && expectedPlaceholder !== lastPlaceholder) {
+                // Skip unmounts for placeholders that aren't currently mounted
+                // They will have been automatically unmounted already by a subsequent mount()
+                return;
+            }
+
+            if (parent && lastPlaceholder) {
+                parent.replaceChild(
+                    lastPlaceholder,
+                    portalNode
+                );
+
+                parent = undefined;
+                lastPlaceholder = undefined;
+            }
         }
     });
+
+    return portalNode;
 };
 
 export class InPortal extends React.PureComponent<InPortalProps, { nodeProps: {} }> {
@@ -88,28 +132,27 @@ export class OutPortal<C extends Component<any>> extends React.PureComponent<Out
     }
 
     componentDidMount() {
+        const node = this.props.node as PortalNode<C>;
+
         const placeholder = this.placeholderNode.current!;
-        placeholder.parentNode!.replaceChild(
-            this.props.node,
-            placeholder
-        );
+        const parent = placeholder.parentNode!;
+        node.mount(parent, placeholder);
         this.passPropsThroughPortal();
     }
 
     componentDidUpdate() {
+        // 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>;
+        const placeholder = this.placeholderNode.current!;
+        const parent = placeholder.parentNode!;
+        node.mount(parent, placeholder);
         this.passPropsThroughPortal();
     }
 
     componentWillUnmount() {
         const node = this.props.node as PortalNode<C>;
-
-        if (node.parentNode) {
-            node.parentNode.replaceChild(
-                this.placeholderNode.current!,
-                node
-            );
-            this.props.node.setPortalProps({});
-        }
+        node.unmount(this.placeholderNode.current!);
     }
 
     render() {

stories/index.stories.js

@@ -145,6 +145,48 @@ storiesOf('Portals', module)
             </div>
         });
     })
+    .add('renders reliably, even with frequent changes and multiple portals', () => {
+        const portalNode = portals.createPortalNode('div');
+
+        const Target = (p) => p.value.toString();
+
+        const Parent = () => {
+            const [state, setState] = React.useState(false);
+
+            // Change frequently, to hunt for race conditions. On leaving this story, this might
+            // complain about calling setState after unmount - that's totally fine, we don't care.
+            // There should be no other errors though.
+            setTimeout(() => {
+                setState(!state);
+            }, 100);
+
+            return <div>
+                Portal flickers between 2 / 3 / nothing here:
+                { state
+                    // What happens if you render the same portal twice?
+                    ? <>
+                        <portals.OutPortal node={portalNode} value={1} />
+                        <portals.OutPortal node={portalNode} value={2} />
+                    </>
+                    // What happens if you switch from 2 portals to 1, to 2 to zero, at random?
+                    : Math.random() > 0.5
+                        ? <portals.OutPortal node={portalNode} value={3} />
+                        : null
+                }
+            </div>;
+        }
+
+        return <div>
+            <div>
+                Portal defined here:
+                <portals.InPortal node={portalNode}>
+                    <Target value='unmounted' />
+                </portals.InPortal>
+            </div>
+
+            <Parent />
+        </div>;
+    })
     .add('Example from README', () => {
         const MyExpensiveComponent = () => 'expensive!';