Merge pull request #4188 from overleaf/ae-memo

Improve React performance by memoizing components and values GitOrigin-RevId: 805278b8b7ac04c3dc4b078fa53cc0e3770d261b
2021-06-22 02:07:08 +00:00
parent d64172cfff
commit eebeffc1c5
11 changed files with 216 additions and 157 deletions
@@ -264,19 +264,34 @@ export function ChatProvider({ children }) {
    markMessagesAsRead,
  ])

-  const value = {
-    status: state.status,
-    messages: state.messages,
-    initialMessagesLoaded: state.initialMessagesLoaded,
-    atEnd: state.atEnd,
-    unreadMessageCount: state.unreadMessageCount,
-    loadInitialMessages,
-    loadMoreMessages,
-    reset,
-    sendMessage,
-    markMessagesAsRead,
-    error: state.error,
-  }
+  const value = useMemo(
+    () => ({
+      status: state.status,
+      messages: state.messages,
+      initialMessagesLoaded: state.initialMessagesLoaded,
+      atEnd: state.atEnd,
+      unreadMessageCount: state.unreadMessageCount,
+      loadInitialMessages,
+      loadMoreMessages,
+      reset,
+      sendMessage,
+      markMessagesAsRead,
+      error: state.error,
+    }),
+    [
+      loadInitialMessages,
+      loadMoreMessages,
+      markMessagesAsRead,
+      reset,
+      sendMessage,
+      state.atEnd,
+      state.error,
+      state.initialMessagesLoaded,
+      state.messages,
+      state.status,
+      state.unreadMessageCount,
+    ]
+  )

  return <ChatContext.Provider value={value}>{children}</ChatContext.Provider>
 }