perf: default warp BubbleList with React.memo

Author: fu050409

.changes/memo-bubble-list.md

@@ -0,0 +1,5 @@
+---
+"@matechat/react": patch:perf
+---
+
+Default wrap `BubbleList` with `React.memo` to avoid extra rerender.

playground/src/Chat.tsx

@@ -1,5 +1,5 @@
 import { MessageSquarePlus } from "lucide-react";
-import { useCallback, useState } from "react";
+import { useMemo, useState } from "react";
 import { BubbleList } from "../../dist/bubble";
 import { Button } from "../../dist/button";
 import { FileUpload } from "../../dist/file-upload";
@@ -50,9 +50,17 @@ export function Chat() {
     initialMessages,
   );
 
-  const onClear = useCallback(() => {
-    setPrompt("");
-    setMessages([]);
+  const footer = useMemo(() => {
+    const onClear = () => {
+      setPrompt("");
+      setMessages([]);
+    };
+    return (
+      <Button onClick={onClear} variant="default" className="self-center">
+        <MessageSquarePlus size="1.1rem" />
+        Start a new conversation
+      </Button>
+    );
   }, [setMessages]);
 
   return (
@@ -63,12 +71,7 @@ export function Chat() {
           messages={messages}
           background="right-solid"
           isPending={isPending}
-          footer={
-            <Button onClick={onClear} variant="default" className="self-center">
-              <MessageSquarePlus size="1.1rem" />
-              Start a new conversation
-            </Button>
-          }
+          footer={footer}
         />
         {messages.length === 0 && (
           <Prompts>

src/bubble.tsx

@@ -3,7 +3,7 @@ import "./tailwind.css";
 
 import clsx from "clsx";
 import type React from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
 import Markdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import {
@@ -247,7 +247,7 @@ export interface BubbleListProps extends React.ComponentProps<"div"> {
   threshold?: number;
 }
 
-export function BubbleList({
+export const BubbleList = memo(function BubbleList({
   className,
   background = "right-solid",
   footer,
@@ -424,4 +424,4 @@ export function BubbleList({
       )}
     </div>
   );
-}
+});