More pure components

4 files changed, 17 insertions, 9 deletions

diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js
index 032504c34..6afb8d969 100644
--- a/vnext/src/components/Message.js
+++ b/vnext/src/components/Message.js
@@ -11,7 +11,7 @@ import { format } from '../utils/embed';
 
 import './Message.css';
 
-const Message = React.memo(({ data, visitor, children, ...rest }) => {
+function Message({ data, visitor, children, ...rest }) {
     return (
         <div className="msg-cont">
             <header className="h">
@@ -25,7 +25,7 @@ const Message = React.memo(({ data, visitor, children, ...rest }) => {
                         </Link>
                     </div>
                 </Avatar>
-                <Tags user={data.user} data={data.tags || []} />
+                <TagsList user={data.user} data={data.tags || []} />
             </header>
             <div className="msg-txt">
                 <p dangerouslySetInnerHTML={{ __html: format(data.body, data.mid, (data.tags || []).indexOf('code') >= 0) }}></p>
@@ -82,11 +82,11 @@ const Message = React.memo(({ data, visitor, children, ...rest }) => {
             {children}
         </div>
     );
-});
+}
 
-export default Message;
+export default React.memo(Message);
 
-const Tags = React.memo(({ data, user, ...rest }) => {
+function Tags({ data, user, ...rest }) {
     return data.length > 0 && (
         <div className="msg-tags">
             {
@@ -96,7 +96,9 @@ const Tags = React.memo(({ data, user, ...rest }) => {
             }
         </div>
     );
-});
+}
+
+const TagsList = React.memo(Tags);
 
 Message.propTypes = {
     data: MessageType,
diff --git a/vnext/src/components/NavigationIcon.js b/vnext/src/components/NavigationIcon.js
index 5c5415ef3..0a22ac57b 100644
--- a/vnext/src/components/NavigationIcon.js
+++ b/vnext/src/components/NavigationIcon.js
@@ -5,7 +5,7 @@ import Icon from './Icon';
 
 import './NavigationIcon.css';
 
-export default function NavigationIcon(props) {
+function NavigationIcon(props) {
     return (
         <div id="navicon" className="mobile" onClick={props.onToggle}>
             <Icon name="ei-navicon" size="s"/>
@@ -13,6 +13,8 @@ export default function NavigationIcon(props) {
     );
 }
 
+export default React.memo(NavigationIcon);
+
 NavigationIcon.propTypes = {
     onToggle: PropTypes.func.isRequired
 };
diff --git a/vnext/src/components/PM.js b/vnext/src/components/PM.js
index 6b8c053ba..a1e70ad5b 100644
--- a/vnext/src/components/PM.js
+++ b/vnext/src/components/PM.js
@@ -5,7 +5,7 @@ import { UserType, MessageType } from './Types';
 import Avatar from './Avatar';
 import { format } from '../utils/embed';
 
-export default function PM(props) {
+function PM(props) {
     const { chat } = props;
     return (
         <li>
@@ -19,6 +19,8 @@ export default function PM(props) {
     );
 }
 
+export default React.memo(PM);
+
 function bubbleStyle(me, msg) {
     const isMe = me.uid === msg.user.uid;
     const color = isMe ? '#fff' : '#222';
diff --git a/vnext/src/components/Spinner.js b/vnext/src/components/Spinner.js
index fffa2c808..c1d42db45 100644
--- a/vnext/src/components/Spinner.js
+++ b/vnext/src/components/Spinner.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ContentLoader from 'react-content-loader';
 
-export default function Spinner(props) {
+function Spinner(props) {
     return (
         <div className="msg-cont">
             <ContentLoader
@@ -21,6 +21,8 @@ export default function Spinner(props) {
     );
 }
 
+export default React.memo(Spinner);
+
 export function ChatSpinner(props) {
     return (
         <ContentLoader