Memoizing Contact, Icon and Message

1 files changed, 11 insertions, 13 deletions

diff --git a/vnext/src/components/Contact.js b/vnext/src/components/Contact.js
index 300b650b..787acd57 100644
--- a/vnext/src/components/Contact.js
+++ b/vnext/src/components/Contact.js
@@ -3,20 +3,18 @@ import { UserType } from './Types';
 
 import Avatar from './Avatar';
 
-export default class Contact extends React.Component {
+const Contact = React.memo(({user, ...rest}) => {
+    return (
+        <>
+            <Avatar user={user} link={`/pm/${user.uname}`}>
+                {user.unreadCount && <span className="badge">{user.unreadCount}</span>}
+                <div className="msg-ts">{user.lastMessageText}</div>
+            </Avatar>
+        </>
+    );
+});
 
-    render() {
-        const { user } = this.props;
-        return (
-            <>
-                <Avatar user={user} link={`/pm/${user.uname}`}>
-                    {user.unreadCount && <span className="badge">{user.unreadCount}</span>}
-                    <div className="msg-ts">{user.lastMessageText}</div>
-                </Avatar>
-            </>
-        );
-    }
-}
+export default Contact;
 
 Contact.propTypes = {
     user: UserType