test_Performance_issue_with_many_chat_message

client/src/Components/local/organisms/chat-messages-list/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { Box, FormControlLabel, FormGroup, Switch } from '@material-ui/core'
 /* Import Types */
 import PropTypes from './types/props'
@@ -15,19 +15,47 @@ export const ChatMessagesList: React.FC<PropTypes> = ({
   messages, icons, colors, names, onMarkAllAsRead, isUmpire,
   playerRole, playerForce, chatContainerHeight, turnPresentation, observing, markUnread, hideForcesInChannel, hideAuthor
 }: PropTypes) => {
-  const [revMessages, setRevMessages] = useState<Array<ChatMessageType | MessageInfoTypeClipped>>([])
   const [trimMessages, setTrimMessages] = useState<boolean>(true)
 
   const trimmedLen = 50
 
-  useEffect(() => {
+  // only update the rendered messages if the messages change
+  const messageList = useMemo(() => {
     // cast messages, for type-checking
     const chatMessages = messages as Array<ChatMessageType | MessageInfoTypeClipped>
     // trim messages, if necessary
     const rMessages = trimMessages ? chatMessages.slice(-trimmedLen) : chatMessages
     // note we have to clone it first, since reverse is destructive
     const cMessages = [...rMessages].reverse()
-    setRevMessages(cMessages)
+    return cMessages.map((message, key) => {
+      if (message.messageType === INFO_MESSAGE_CLIPPED) {
+        return (
+          <Box mr={2} key={`${message.gameTurn}-turnmarker-${key}`}>
+            <p className={styles['turn-marker']}>Turn {formatTurn(message.gameTurn, turnPresentation)}</p>
+          </Box>
+        )
+      } else {
+        const chatMsg = message as ChatMessageType
+        return (
+          <Box mb={2} mr={2} key={key} display="block">
+            <Box
+              maxWidth={'60%'}
+              minWidth={'40%'}
+              display="inline-block"
+              style={{ float: chatMsg.details.from.roleId === playerRole ? 'right' : 'left' }}
+            >
+              <ChatMessage
+                isUmpire={isUmpire}
+                isOwner={chatMsg.details.from.force === playerForce}
+                message={message}
+                markUnread={markUnread}
+                hideAuthor={hideAuthor}
+              />
+            </Box>
+          </Box>
+        )
+      }
+    })
   }, [messages, trimMessages])
 
   const height = chatContainerHeight || 280
@@ -43,37 +71,7 @@ export const ChatMessagesList: React.FC<PropTypes> = ({
         <FormControlLabel control={<Switch id='trim-mgs' color="default" onClick={() => setTrimMessages(!trimMessages)} checked={trimMessages} />} label={'Trim to last ' + trimmedLen + ' messaages'} />
       </FormGroup>
       <Box ml={2} className={styles['messages-list']} style={{ height: observing ? 'unset' : `calc(100% - ${height}px)` }} flexDirection="column-reverse" display="flex">
-        {
-          revMessages.map((message, key) => {
-            if (message.messageType === INFO_MESSAGE_CLIPPED) {
-              return (
-                <Box mr={2} key={`${message.gameTurn}-turnmarker-${key}`}>
-                  <p className={styles['turn-marker']}>Turn {formatTurn(message.gameTurn, turnPresentation)}</p>
-                </Box>
-              )
-            } else {
-              const chatMsg = message as ChatMessageType
-              return (
-                <Box mb={2} mr={2} key={key} display="block">
-                  <Box
-                    maxWidth={'60%'}
-                    minWidth={'40%'}
-                    display="inline-block"
-                    style={{ float: chatMsg.details.from.roleId === playerRole ? 'right' : 'left' }}
-                  >
-                    <ChatMessage
-                      isUmpire={isUmpire}
-                      isOwner={chatMsg.details.from.force === playerForce}
-                      message={message}
-                      markUnread={markUnread}
-                      hideAuthor={hideAuthor}
-                    />
-                  </Box>
-                </Box>
-              )
-            }
-          })
-        }
+        { messageList }
       </Box>
     </Box>
   )