Modal is memo

1 files changed, 22 insertions, 28 deletions

diff --git a/vnext/src/components/Modal.js b/vnext/src/components/Modal.js
index 971efe910..5ee8c3ec8 100644
--- a/vnext/src/components/Modal.js
+++ b/vnext/src/components/Modal.js
@@ -3,39 +3,33 @@ import PropTypes from 'prop-types';
 
 import Icon from './Icon';
 
-export default class Modal extends React.Component {
-    render() {
-        // Render nothing if the "show" prop is false
-        if (!this.props.show) {
-            return null;
-        }
-
-        // The gray background
-        const backdropStyle = {
-            position: 'fixed',
-            top: 0,
-            bottom: 0,
-            left: 0,
-            right: 0,
-            backgroundColor: 'rgba(0, 0, 0, 0.3)',
-            padding: 50
-        };
-
-        return (
-            <div id="dialogt" style={backdropStyle}>
-                <div id="dialogw">
-                    <div id="dialog_header">
-                        <div id="dialogc" onClick={this.props.onClose}>
-                            <Icon name="ei-close" size="s" />
-                        </div>
+function Modal(props) {
+    // The gray background
+    const backdropStyle = {
+        position: 'fixed',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+        padding: 50
+    };
+    return props.show ? (
+        <div id="dialogt" style={backdropStyle}>
+            <div id="dialogw">
+                <div id="dialog_header">
+                    <div id="dialogc" onClick={this.props.onClose}>
+                        <Icon name="ei-close" size="s" />
                     </div>
-                    {this.props.children}
                 </div>
+                {this.props.children}
             </div>
-        );
-    }
+        </div>
+    ) : (null);
 }
 
+export default React.memo(Modal);
+
 Modal.propTypes = {
     onClose: PropTypes.func.isRequired,
     show: PropTypes.bool,