From f19d3d4071f5e5d176582a5dc2d2205a3d4948c0 Mon Sep 17 00:00:00 2001
From: Nico Albanese <49612682+nicoalbanese@users.noreply.github.com>
Date: Thu, 15 Jan 2026 13:09:34 +0000
Subject: [PATCH] Remove memo wrapper from Response component (#1391)

---
 components/elements/response.tsx | 21 +++++++++------------
 components/message.tsx           | 19 ++-----------------
 components/messages.tsx          | 26 +-------------------------
 3 files changed, 12 insertions(+), 54 deletions(-)

diff --git a/components/elements/response.tsx b/components/elements/response.tsx
index f0051e0..cf1ceda 100644
--- a/components/elements/response.tsx
+++ b/components/elements/response.tsx
@@ -1,22 +1,19 @@
 "use client";
 
-import { type ComponentProps, memo } from "react";
+import type { ComponentProps } from "react";
 import { Streamdown } from "streamdown";
 import { cn } from "@/lib/utils";
 
 type ResponseProps = ComponentProps<typeof Streamdown>;
 
-export const Response = memo(
-  ({ className, ...props }: ResponseProps) => (
-    <Streamdown
-      className={cn(
-        "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [&_code]:whitespace-pre-wrap [&_code]:break-words [&_pre]:max-w-full [&_pre]:overflow-x-auto",
-        className
-      )}
-      {...props}
-    />
-  ),
-  (prevProps, nextProps) => prevProps.children === nextProps.children
+export const Response = ({ className, ...props }: ResponseProps) => (
+  <Streamdown
+    className={cn(
+      "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [&_code]:whitespace-pre-wrap [&_code]:break-words [&_pre]:max-w-full [&_pre]:overflow-x-auto",
+      className
+    )}
+    {...props}
+  />
 );
 
 Response.displayName = "Response";
diff --git a/components/message.tsx b/components/message.tsx
index 935abad..66dde7f 100644
--- a/components/message.tsx
+++ b/components/message.tsx
@@ -1,7 +1,6 @@
 "use client";
 import type { UseChatHelpers } from "@ai-sdk/react";
-import equal from "fast-deep-equal";
-import { memo, useState } from "react";
+import { useState } from "react";
 import type { Vote } from "@/lib/db/schema";
 import type { ChatMessage } from "@/lib/types";
 import { cn, sanitizeText } from "@/lib/utils";
@@ -358,21 +357,7 @@ const PurePreviewMessage = ({
   );
 };
 
-export const PreviewMessage = memo(
-  PurePreviewMessage,
-  (prevProps, nextProps) => {
-    if (
-      prevProps.isLoading === nextProps.isLoading &&
-      prevProps.message.id === nextProps.message.id &&
-      prevProps.requiresScrollPadding === nextProps.requiresScrollPadding &&
-      equal(prevProps.message.parts, nextProps.message.parts) &&
-      equal(prevProps.vote, nextProps.vote)
-    ) {
-      return true;
-    }
-    return false;
-  }
-);
+export const PreviewMessage = PurePreviewMessage;
 
 export const ThinkingMessage = () => {
   return (
diff --git a/components/messages.tsx b/components/messages.tsx
index 729c430..9ab3787 100644
--- a/components/messages.tsx
+++ b/components/messages.tsx
@@ -1,7 +1,5 @@
 import type { UseChatHelpers } from "@ai-sdk/react";
-import equal from "fast-deep-equal";
 import { ArrowDownIcon } from "lucide-react";
-import { memo } from "react";
 import { useMessages } from "@/hooks/use-messages";
 import type { Vote } from "@/lib/db/schema";
 import type { ChatMessage } from "@/lib/types";
@@ -107,26 +105,4 @@ function PureMessages({
   );
 }
 
-export const Messages = memo(PureMessages, (prevProps, nextProps) => {
-  if (prevProps.isArtifactVisible && nextProps.isArtifactVisible) {
-    return true;
-  }
-
-  if (prevProps.status !== nextProps.status) {
-    return false;
-  }
-  if (prevProps.selectedModelId !== nextProps.selectedModelId) {
-    return false;
-  }
-  if (prevProps.messages.length !== nextProps.messages.length) {
-    return false;
-  }
-  if (!equal(prevProps.messages, nextProps.messages)) {
-    return false;
-  }
-  if (!equal(prevProps.votes, nextProps.votes)) {
-    return false;
-  }
-
-  return false;
-});
+export const Messages = PureMessages;