Performance (mckaywrigley#602)

components/Chat/Chat.tsx

@@ -28,11 +28,11 @@ import HomeContext from '@/pages/api/home/home.context';
 import Spinner from '../Spinner';
 import { ChatInput } from './ChatInput';
 import { ChatLoader } from './ChatLoader';
-import { ChatMessage } from './ChatMessage';
 import { ErrorMessageDiv } from './ErrorMessageDiv';
 import { ModelSelect } from './ModelSelect';
 import { SystemPrompt } from './SystemPrompt';
 import { TemperatureSlider } from './Temperature';
+import { MemoizedChatMessage } from './MemoizedChatMessage';
 
 interface Props {
  stopConversationRef: MutableRefObject<boolean>;
@@ -464,7 +464,7 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
  )}
 
  {selectedConversation?.messages.map((message, index) => (
- <ChatMessage
+ <MemoizedChatMessage
  key={index}
  message={message}
  messageIndex={index}

components/Chat/ChatMessage.tsx

@@ -23,7 +23,7 @@ import rehypeMathjax from 'rehype-mathjax';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 
-interface Props {
+export interface Props {
  message: Message;
  messageIndex: number;
  onEdit?: (editedMessage: Message) => void

components/Chat/MemoizedChatMessage.tsx

@@ -0,0 +1,9 @@
+import { FC, memo } from "react";
+import { ChatMessage, Props } from "./ChatMessage";
+
+export const MemoizedChatMessage: FC<Props> = memo(
+ ChatMessage,
+ (prevProps, nextProps) => (
+ prevProps.message.content === nextProps.message.content
+ )
+);

components/Markdown/MemoizedReactMarkdown.tsx

@@ -1,4 +1,9 @@
 import { FC, memo } from 'react';
 import ReactMarkdown, { Options } from 'react-markdown';
 
-export const MemoizedReactMarkdown: FC<Options> = memo(ReactMarkdown);
+export const MemoizedReactMarkdown: FC<Options> = memo(
+ ReactMarkdown,
+ (prevProps, nextProps) => (
+ prevProps.children === nextProps.children
+ )
+);