Merge pull request #14 from e-roy:remove-memos-and-callback-hooks

remove memos and callback hooks
e-roy · Dec 31, 2023 · f5e4904 · f5e4904
2 parents 2a5a09d + 3836059
commit f5e4904
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 71 deletions.
diff --git a/src/components/ChatContainer.tsx b/src/components/ChatContainer.tsx
@@ -1,6 +1,6 @@
 "use client";
 // components/ChatContainer.tsx
-import React, { useRef, useEffect, FormEvent, useCallback } from "react";
+import React, { useRef, useEffect, useCallback } from "react";
 import { Message, useChat } from "ai/react";
 import { Card } from "./ui/card";
 
@@ -33,26 +33,9 @@ export const ChatContainer = () => {
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
-  const scrollToBottom = useCallback(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, []);
-
   useEffect(() => {
-    scrollToBottom();
-  }, [messages, scrollToBottom]);
-
-  const handleFormSubmit = async (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    handleSubmit(event);
-  };
-
-  const handleClearChat = useCallback(() => {
-    setMessages([]);
-  }, [setMessages]);
-
-  const handleRefreshMessage = useCallback(() => {
-    reload();
-  }, [reload]);
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
 
   const messagesRef = useRef<Message[]>(messages);
 
@@ -79,7 +62,7 @@ export const ChatContainer = () => {
               variant={`secondary`}
               type={`button`}
               size={`sm`}
-              onClick={handleClearChat}
+              onClick={() => setMessages([])}
             >
               <MessageCircleX className={`mr-2`} /> Clear chat history
             </Button>
@@ -92,7 +75,7 @@ export const ChatContainer = () => {
               message={message}
               isLastMessage={messages.length === index + 1}
               isLoading={isLoading}
-              onRefresh={handleRefreshMessage}
+              onRefresh={reload}
               onRemove={() => handleRemoveMessage(message.id)}
             />
           ))}
@@ -105,7 +88,7 @@ export const ChatContainer = () => {
           placeholder="Chat with Gemini Pro"
           loading={isLoading}
           onInputChange={handleInputChange}
-          onFormSubmit={handleFormSubmit}
+          onFormSubmit={handleSubmit}
           isSubmittable={input.trim() !== ""}
         />
       </Card>

diff --git a/src/components/markdown-viewer/MarkdownViewer.tsx b/src/components/markdown-viewer/MarkdownViewer.tsx
@@ -1,15 +1,13 @@
 "use client";
 // components/MarkdownViewer.tsx
-import React, { useMemo } from "react";
+import React from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
 import rehypeSanitize from "rehype-sanitize";
 
 import { UlComponent, OlComponent, LiComponent } from "./list";
-
 import { PreComponent, CodeBlock } from "./code";
-
 import {
   TableComponent,
   TheadComponent,
@@ -37,56 +35,40 @@ const Anchor: React.FC<AnchorProps> = ({ href, children }) => {
   );
 };
 
-const MemoizedAnchor = React.memo(Anchor);
-
-const MemoizedUlComponent = React.memo(UlComponent);
-const MemoizedOlComponent = React.memo(OlComponent);
-const MemoizedLiComponent = React.memo(LiComponent);
-
-const MemoizedPreComponent = React.memo(PreComponent);
-const MemoizedCodeBlock = React.memo(CodeBlock);
-
-const MemoizedTableComponent = React.memo(TableComponent);
-const MemoizedTheadComponent = React.memo(TheadComponent);
-const MemoizedTbodyComponent = React.memo(TbodyComponent);
-const MemoizedTrComponent = React.memo(TrComponent);
-const MemoizedThComponent = React.memo(ThComponent);
-const MemoizedTdComponent = React.memo(TdComponent);
-
 interface IMarkdownViewerProps {
   text: string;
 }
 
-export const MarkdownViewer: React.FC<IMarkdownViewerProps> = ({ text }) => {
-  const components = useMemo(
-    () => ({
-      a: MemoizedAnchor,
+export const MarkdownViewer: React.FC<IMarkdownViewerProps> = React.memo(
+  function MarkdownViewer({ text }) {
+    const components = {
+      a: Anchor,
 
-      ul: MemoizedUlComponent,
-      ol: MemoizedOlComponent,
-      li: MemoizedLiComponent,
+      ul: UlComponent,
+      ol: OlComponent,
+      li: LiComponent,
 
-      pre: MemoizedPreComponent,
-      code: MemoizedCodeBlock,
+      pre: PreComponent,
+      code: CodeBlock,
 
-      table: MemoizedTableComponent,
-      thead: MemoizedTheadComponent,
-      tbody: MemoizedTbodyComponent,
-      tr: MemoizedTrComponent,
-      th: MemoizedThComponent,
-      td: MemoizedTdComponent,
-    }),
-    []
-  );
+      table: TableComponent,
+      thead: TheadComponent,
+      tbody: TbodyComponent,
+      tr: TrComponent,
+      th: ThComponent,
+      td: TdComponent,
+    };
 
-  return (
-    <ReactMarkdown
-      // @ts-ignore
-      components={components}
-      remarkPlugins={[remarkGfm]}
-      rehypePlugins={[rehypeRaw, rehypeSanitize]}
-    >
-      {text}
-    </ReactMarkdown>
-  );
-};
+    return (
+      <ReactMarkdown
+        // @ts-ignore
+        components={components}
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeRaw, rehypeSanitize]}
+      >
+        {text}
+      </ReactMarkdown>
+    );
+  },
+  (prevProps, nextProps) => prevProps.text === nextProps.text
+);