perf: wrap list/grid components in React.memo to skip unnecessary re-renders

apps/web/components/chat/message/user-message.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { memo } from "react"
 import { Copy, Check } from "lucide-react"
 import type { UIMessage } from "@ai-sdk/react"
 
@@ -9,7 +10,7 @@ interface UserMessageProps {
 	onCopy: (messageId: string, text: string) => void
 }
 
-export function UserMessage({
+export const UserMessage = memo(function UserMessage({
 	message,
 	copiedMessageId,
 	onCopy,
@@ -38,4 +39,4 @@ export function UserMessage({
 			</button>
 		</div>
 	)
-}
+})

apps/web/components/document-cards/file-preview.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { memo, useState } from "react"
 import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api"
 import type { z } from "zod"
 import { dmSansClassName } from "@/lib/fonts"
@@ -43,7 +43,11 @@ function getFileTypeInfo(document: DocumentWithMemories): {
 	}
 }
 
-export function FilePreview({ document }: { document: DocumentWithMemories }) {
+export const FilePreview = memo(function FilePreview({
+	document,
+}: {
+	document: DocumentWithMemories
+}) {
 	const [imageError, setImageError] = useState(false)
 	const { extension, color } = getFileTypeInfo(document)
 
@@ -107,4 +111,4 @@ export function FilePreview({ document }: { document: DocumentWithMemories }) {
 			)}
 		</div>
 	)
-}
+})

apps/web/components/document-cards/website-preview.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { memo, useState } from "react"
 import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api"
 import type { z } from "zod"
 
@@ -12,7 +12,7 @@ type OgData = {
 	image?: string
 }
 
-export function WebsitePreview({
+export const WebsitePreview = memo(function WebsitePreview({
 	document,
 	ogData,
 }: {
@@ -40,4 +40,4 @@ export function WebsitePreview({
 			) : null}
 		</div>
 	)
-}
+})

apps/web/components/document-cards/youtube-preview.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { memo } from "react"
 import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api"
 import type { z } from "zod"
 import { dmSansClassName } from "@/lib/fonts"
@@ -9,7 +10,7 @@ import { extractYouTubeVideoId } from "../utils"
 type DocumentsResponse = z.infer<typeof DocumentsWithMemoriesResponseSchema>
 type DocumentWithMemories = DocumentsResponse["documents"][0]
 
-export function YoutubePreview({
+export const YoutubePreview = memo(function YoutubePreview({
 	document,
 }: {
 	document: DocumentWithMemories
@@ -49,4 +50,4 @@ export function YoutubePreview({
 			</div>
 		</div>
 	)
-}
+})