perf(frontend): Context value useMemo 稳定化
AuthContext.Provider 和 ToastContext.Provider 的 value 对象 用 useMemo 包裹,避免每次 Provider render 产生新引用导致 所有消费者不必要的 re-render。
This commit is contained in:
@ -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 渲染区 */}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user