From b94ea9284b133a97f3d30fcf5aeba9543d4ee0b7 Mon Sep 17 00:00:00 2001
From: oscarzhou <oscarzhou0727@icloud.com>
Date: Sun, 13 Dec 2020 19:25:45 +1300
Subject: [PATCH] component: improve the performance by using
 shouldComponentUpdate() lifecycle

---
 src/components/Layout/Layout.js  |  2 +-
 src/components/UI/Modal/Modal.js | 44 ++++++++++++++++++--------------
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
index e105003..de610fe 100644
--- a/src/components/Layout/Layout.js
+++ b/src/components/Layout/Layout.js
@@ -26,7 +26,7 @@ class Layout extends Component {
                 <Toolbar drawerToggleClicked={this.sideDrawerToggleHandler} />
                 <SideDrawer open={this.state.showSideDrawer} closed={this.sideDrawerClosedHandler} />
                 <main className={classes.Content}>
-                    {this.state.children}
+                    {this.props.children}
                 </main>
             </Aux>
 
diff --git a/src/components/UI/Modal/Modal.js b/src/components/UI/Modal/Modal.js
index 4a3e780..e3452a3 100644
--- a/src/components/UI/Modal/Modal.js
+++ b/src/components/UI/Modal/Modal.js
@@ -1,26 +1,32 @@
-import React from 'react';
+import React, { Component } from 'react';
 
 import Aux from '../../../hoc/Auxiliary';
 import Backdrop from '../Backdrop/Backdrop';
 import classes from './Modal.css';
 
-const modal = (props) => {
-    return (
-        <Aux>
-            <Backdrop
-                show={props.show}
-                clicked={props.modalClosed}></Backdrop>
-            <div
-                className={classes.Modal}
-                style={{
-                    transform: props.show ? 'translateY(0)' : 'translateY(-100vh)',
-                    opacity: props.show ? '1' : '0',
-                }}>
-                {props.children}
-            </div>
+class Modal extends Component {
 
-        </Aux>
-    );
-};
+    shouldComponentUpdate(nextProps, nextState){
+        return nextProps.show !== this.props.show;
+    }
 
-export default modal;
\ No newline at end of file
+    render() {
+        return (
+            <Aux>
+                <Backdrop
+                    show={this.props.show}
+                    clicked={this.props.modalClosed}></Backdrop>
+                <div
+                    className={classes.Modal}
+                    style={{
+                        transform: this.props.show ? 'translateY(0)' : 'translateY(-100vh)',
+                        opacity: this.props.show ? '1' : '0',
+                    }}>
+                    {this.props.children}
+                </div>
+            </Aux>
+        );
+    }
+}
+
+export default Modal;
\ No newline at end of file