From dc97a7385f3fcee804e17820709a329a5bdbcc4b Mon Sep 17 00:00:00 2001
From: duxingchen <duxingchen@iris-rs.cn>
Date: Thu, 6 Aug 2026 17:34:05 +0800
Subject: [PATCH] =?UTF-8?q?perf(frontend):=20Context=20value=20useMemo=20?=
 =?UTF-8?q?=E7=A8=B3=E5=AE=9A=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AuthContext.Provider 和 ToastContext.Provider 的 value 对象
用 useMemo 包裹，避免每次 Provider render 产生新引用导致
所有消费者不必要的 re-render。
---
 frontend/src/components/ui/Toast.tsx  |  6 +++++-
 frontend/src/contexts/AuthContext.tsx | 21 +++++++++++++--------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/ui/Toast.tsx b/frontend/src/components/ui/Toast.tsx
index f5641b5..07da3c2 100644
--- a/frontend/src/components/ui/Toast.tsx
+++ b/frontend/src/components/ui/Toast.tsx
@@ -3,6 +3,7 @@ import {
   useContext,
   useState,
   useCallback,
+  useMemo,
   type ReactNode,
 } from "react";
 import { X, CheckCircle, AlertCircle, Info } from "lucide-react";
@@ -52,8 +53,11 @@ export function ToastProvider({ children }: { children: ReactNode }) {
     }, 3500);
   }, []);
 
+  // 🚀 稳定 Context value 引用
+  const ctxValue = useMemo<ToastContextValue>(() => ({ toast }), [toast]);
+
   return (
-    <ToastContext.Provider value={{ toast }}>
+    <ToastContext.Provider value={ctxValue}>
       {children}
 
       {/* Toast 渲染区 */}
diff --git a/frontend/src/contexts/AuthContext.tsx b/frontend/src/contexts/AuthContext.tsx
index c4aa1b3..69f117e 100644
--- a/frontend/src/contexts/AuthContext.tsx
+++ b/frontend/src/contexts/AuthContext.tsx
@@ -3,6 +3,7 @@ import {
   useContext,
   useState,
   useCallback,
+  useMemo,
   useEffect,
   type ReactNode,
 } from "react";
@@ -107,15 +108,19 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     logoutInternal();
   }, []);
 
+  // 🚀 稳定 Context value 引用，避免消费者不必要的 re-render
+  const ctxValue = useMemo<AuthContextValue>(
+    () => ({
+      ...state,
+      login,
+      logout,
+      isAuthenticated: !!state.token && !!state.user,
+    }),
+    [state, login, logout],
+  );
+
   return (
-    <AuthContext.Provider
-      value={{
-        ...state,
-        login,
-        logout,
-        isAuthenticated: !!state.token && !!state.user,
-      }}
-    >
+    <AuthContext.Provider value={ctxValue}>
       {children}
     </AuthContext.Provider>
   );