feat: optimize callback performance

Author: fu050409

.changes/optimize-callback.md

@@ -0,0 +1,5 @@
+---
+"@matechat/react": patch:feat
+---
+
+Optimize callback performance by using `useCallback`.

src/file-upload.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import type React from "react";
-import { useRef } from "react";
+import { useCallback, useRef } from "react";
 import { twMerge } from "tailwind-merge";
 import Appendix from "./icons/appendix.svg";
 
@@ -14,11 +14,14 @@ export function FileUpload({
   ...props
 }: FileUploadProps) {
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(e.target.files ?? []);
-    onFilesSelect(files);
-    if (fileInputRef.current) fileInputRef.current.value = "";
-  };
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = Array.from(e.target.files ?? []);
+      onFilesSelect(files);
+      if (fileInputRef.current) fileInputRef.current.value = "";
+    },
+    [onFilesSelect],
+  );
 
   return (
     <button

src/sender.tsx

@@ -1,7 +1,7 @@
 import "./tailwind.css";
 
 import clsx from "clsx";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 import PublishNew from "./icons/publish-new.svg";
 import QuickStop from "./icons/quick-stop.svg";
@@ -109,7 +109,7 @@ export function Sender({
   }, [message, onMessageChange]);
 
   const [controller, setController] = useState<AbortController | null>(null);
-  const handleSend = () => {
+  const handleSend = useCallback(() => {
     if (isSending) {
       setIsSending(false);
       return controller?.abort();
@@ -133,13 +133,16 @@ export function Sender({
     } else {
       onSend?.(newController);
     }
-  };
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (event.key === "Enter" && !event.shiftKey) {
-      event.preventDefault();
-      handleSend();
-    }
-  };
+  }, [isSending, message, onSend, controller, input]);
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend],
+  );
 
   return (
     <div