Migrating RootPortal to functional component

webapp/src/components/rootPortal.tsx

@@ -1,44 +1,29 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import PropTypes from 'prop-types'
-import React from 'react'
+import React, {useState, useEffect} from 'react'
 import ReactDOM from 'react-dom'
 
 type Props = {
     children: React.ReactNode
 }
 
-export default class RootPortal extends React.PureComponent<Props> {
-    el: HTMLDivElement
+const RootPortal = React.memo((props: Props): JSX.Element => {
+    const [el] = useState(document.createElement('div'))
+    const rootPortal = document.getElementById('root-portal')
 
-    static propTypes = {
-        children: PropTypes.node,
-    }
-
-    constructor(props: Props) {
-        super(props)
-        this.el = document.createElement('div')
-    }
-
-    componentDidMount(): void {
-        const rootPortal = document.getElementById('root-portal')
+    useEffect(() => {
         if (rootPortal) {
-            rootPortal.appendChild(this.el)
+            rootPortal.appendChild(el)
         }
-    }
-
-    componentWillUnmount(): void {
-        const rootPortal = document.getElementById('root-portal')
-        if (rootPortal) {
-            rootPortal.removeChild(this.el)
+        return () => {
+            if (rootPortal) {
+                rootPortal.removeChild(el)
+            }
         }
-    }
+    }, [])
 
-    render(): JSX.Element {
-        return ReactDOM.createPortal(
-            this.props.children,
-            this.el,
-        )
-    }
-}
+    return ReactDOM.createPortal(props.children, el)
+})
+
+export default RootPortal