refactor: Avoid useless re-render on <Input/>

Chainlit · Oct 23, 2023 · a2af914 · a2af914
1 parent 18a553b
commit a2af914
Show file tree

Hide file tree

Showing 4 changed files with 345 additions and 352 deletions.
diff --git a/frontend/src/components/organisms/chat/index.tsx b/frontend/src/components/organisms/chat/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { v4 as uuidv4 } from 'uuid';
@@ -31,11 +31,11 @@ const Chat = () => {
   const sideViewElement = useRecoilValue(sideViewState);
 
   const [autoScroll, setAutoScroll] = useState(true);
-
   const { error, disabled } = useChatData();
 
-  const fileSpec = { max_size_mb: 20 };
-  const onFileUpload = (payloads: IFileResponse[]) => {
+  const fileSpec = useMemo(() => ({ max_size_mb: 20 }), []);
+
+  const onFileUpload = useCallback((payloads: IFileResponse[]) => {
     const fileElements = payloads.map((file) => ({
       id: uuidv4(),
       type: 'file' as const,
@@ -45,9 +45,12 @@ const Chat = () => {
       content: file.content
     }));
     setAttachments((prev) => prev.concat(fileElements));
-  };
+  }, []);
 
-  const onFileUploadError = (error: string) => toast.error(error);
+  const onFileUploadError = useCallback(
+    () => (error: string) => toast.error(error),
+    []
+  );
 
   const upload = useUpload({
     spec: fileSpec,

diff --git a/frontend/src/components/organisms/chat/inputBox/index.tsx b/frontend/src/components/organisms/chat/inputBox/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { useSetRecoilState } from 'recoil';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -9,7 +9,6 @@ import {
   IFileElement,
   IFileResponse,
   IMessage,
-  useChatData,
   useChatInteract
 } from '@chainlit/components';
 
@@ -30,95 +29,95 @@ interface Props {
   projectSettings?: IProjectSettings;
 }
 
-const InputBox = ({
-  fileSpec,
-  onFileUpload,
-  onFileUploadError,
-  setAutoScroll,
-  projectSettings
-}: Props) => {
-  const setChatHistory = useSetRecoilState(chatHistoryState);
-
-  const { user } = useAuth();
-  const { sendMessage, replyMessage } = useChatInteract();
-  const { askUser } = useChatData();
-  // const tokenCount = useRecoilValue(tokenCountState);
-
-  const onSubmit = useCallback(
-    async (msg: string, files?: IFileElement[]) => {
-      const message: IMessage = {
-        id: uuidv4(),
-        author: user?.username || 'User',
-        authorIsUser: true,
-        content: msg,
-        createdAt: new Date().toISOString()
-      };
-
-      setChatHistory((old) => {
-        const MAX_SIZE = 50;
-        const messages = [...(old.messages || [])];
-        messages.push({
+const InputBox = memo(
+  ({
+    fileSpec,
+    onFileUpload,
+    onFileUploadError,
+    setAutoScroll,
+    projectSettings
+  }: Props) => {
+    const setChatHistory = useSetRecoilState(chatHistoryState);
+
+    const { user } = useAuth();
+    const { sendMessage, replyMessage } = useChatInteract();
+    // const tokenCount = useRecoilValue(tokenCountState);
+
+    const onSubmit = useCallback(
+      async (msg: string, files?: IFileElement[]) => {
+        const message: IMessage = {
+          id: uuidv4(),
+          author: user?.username || 'User',
+          authorIsUser: true,
           content: msg,
-          createdAt: new Date().getTime()
+          createdAt: new Date().toISOString()
+        };
+
+        setChatHistory((old) => {
+          const MAX_SIZE = 50;
+          const messages = [...(old.messages || [])];
+          messages.push({
+            content: msg,
+            createdAt: new Date().getTime()
+          });
+
+          return {
+            ...old,
+            messages:
+              messages.length > MAX_SIZE
+                ? messages.slice(messages.length - MAX_SIZE)
+                : messages
+          };
         });
 
-        return {
-          ...old,
-          messages:
-            messages.length > MAX_SIZE
-              ? messages.slice(messages.length - MAX_SIZE)
-              : messages
+        setAutoScroll(true);
+        sendMessage(message, files);
+      },
+      [user, projectSettings, sendMessage]
+    );
+
+    const onReply = useCallback(
+      async (msg: string) => {
+        const message = {
+          id: uuidv4(),
+          author: user?.username || 'User',
+          authorIsUser: true,
+          content: msg,
+          createdAt: new Date().toISOString()
         };
-      });
-
-      setAutoScroll(true);
-      sendMessage(message, files);
-    },
-    [user, projectSettings, sendMessage]
-  );
-
-  const onReply = useCallback(
-    async (msg: string) => {
-      const message = {
-        id: uuidv4(),
-        author: user?.username || 'User',
-        authorIsUser: true,
-        content: msg,
-        createdAt: new Date().toISOString()
-      };
-
-      replyMessage(message);
-      setAutoScroll(true);
-    },
-    [askUser, user, replyMessage]
-  );
-
-  return (
-    <Box
-      display="flex"
-      flexDirection="column"
-      gap={1}
-      py={2}
-      sx={{
-        boxSizing: 'border-box',
-        width: '100%',
-        maxWidth: '60rem',
-        px: 2,
-        m: 'auto',
-        justifyContent: 'center'
-      }}
-    >
-      <StopButton />
-      <Box>
-        <Input
-          fileSpec={fileSpec}
-          onFileUpload={onFileUpload}
-          onFileUploadError={onFileUploadError}
-          onSubmit={onSubmit}
-          onReply={onReply}
-        />
-        {/* {tokenCount > 0 && ( */}
-        {/* <Stack flexDirection="row" alignItems="center">
+
+        replyMessage(message);
+        setAutoScroll(true);
+      },
+      [user, replyMessage]
+    );
+
+    return (
+      <Box
+        display="flex"
+        flexDirection="column"
+        gap={1}
+        py={2}
+        sx={{
+          boxSizing: 'border-box',
+          width: '100%',
+          maxWidth: '60rem',
+          px: 2,
+          m: 'auto',
+          justifyContent: 'center'
+        }}
+      >
+        <StopButton />
+        <Box>
+          <Input
+            fileSpec={fileSpec}
+            onFileUpload={onFileUpload}
+            onFileUploadError={onFileUploadError}
+            onSubmit={onSubmit}
+            onReply={onReply}
+          />
+          {/* {tokenCount > 0 && ( */}
+          {/* <Stack flexDirection="row" alignItems="center">
           <Typography
             sx={{ ml: 'auto' }}
             color="text.secondary"
@@ -127,11 +126,12 @@ const InputBox = ({
             Token usage: {tokenCount}
           </Typography>
         </Stack> */}
-        {/* )} */}
+          {/* )} */}
+        </Box>
+        <WaterMark />
       </Box>
-      <WaterMark />
-    </Box>
-  );
-};
+    );
+  }
+);
 
 export default InputBox;