Convert Portal to functional component, properly remove DOM element on unmount (#1549)

Resolves #1365

Author: brandongregoryscott

src/portal/__tests__/Portal.test.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import Portal from '../src/Portal'
+
+describe('Portal', () => {
+  it('should append container to document body', () => {
+    render(<div>children</div>)
+    render(<Portal>children</Portal>)
+
+    const elements = screen.getAllByText('children')
+
+    expect(elements[1]).toHaveAttribute('evergreen-portal-container')
+  })
+
+  it('should render children', () => {
+    render(
+      <Portal>
+        <span data-testid="children">Hello world</span>
+      </Portal>
+    )
+
+    const children = screen.getByTestId('children')
+
+    expect(children).toHaveTextContent('Hello world')
+    expect(children.parentNode).toHaveAttribute('evergreen-portal-container')
+  })
+
+  it('should remove DOM element when unmounted', () => {
+    const { unmount } = render(<Portal>children</Portal>)
+
+    unmount()
+
+    expect(screen.queryByText('children')).toBeNull()
+    expect(document.querySelector('[evergreen-portal-container]')).toBeNull()
+  })
+})

src/portal/src/Portal.js

@@ -1,40 +1,37 @@
-import { Component } from 'react'
+import { useRef, useState } from 'react'
 import PropTypes from 'prop-types'
-import ReactDOM from 'react-dom'
-import canUseDom from '../../lib/canUseDom'
+import { createPortal } from 'react-dom'
+import { useIsomorphicLayoutEffect } from '../../hooks'
 
-let portalContainer
+// Based on https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/Portal/Portal.tsx
+const Portal = props => {
+  const { children } = props
 
-export default class Portal extends Component {
-  constructor() {
-    super()
+  const [mounted, setMounted] = useState(false)
+  const ref = useRef()
 
-    // This fixes SSR
-    if (!canUseDom) return
+  useIsomorphicLayoutEffect(() => {
+    setMounted(true)
 
-    if (!portalContainer) {
-      portalContainer = document.createElement('div')
-      portalContainer.setAttribute('evergreen-portal-container', '')
-      document.body.appendChild(portalContainer)
-    }
-  }
+    ref.current = document.createElement('div')
+    ref.current.setAttribute('evergreen-portal-container', '')
 
-  componentDidMount() {
-    this.el = document.createElement('div')
-    portalContainer.appendChild(this.el)
-    this.forceUpdate()
-  }
+    document.body.appendChild(ref.current)
 
-  componentWillUnmount() {
-    portalContainer.removeChild(this.el)
-  }
+    return () => {
+      document.body.removeChild(ref.current)
+    }
+  }, [])
 
-  render() {
-    if (!this.el) return null
-    return ReactDOM.createPortal(this.props.children, this.el)
+  if (!mounted) {
+    return null
   }
+
+  return createPortal(children, ref.current)
 }
 
 Portal.propTypes = {
   children: PropTypes.node.isRequired
 }
+
+export default Portal