Context Değerlerini useMemo ile Önbelleğe Alma

Hoş Geldiniz

Nesne Başvurusu Sorunu

// Every render creates a new object!
<UserCtx.Provider value={{ user, logout }}>
  {children}
</UserCtx.Provider>

useMemo ile Düzeltme

const value = useMemo(
  () => ({ user, logout }),
  [user, logout]
);

<UserCtx.Provider value={value}>
  {children}
</UserCtx.Provider>

Bağımlılıkları Dikkatle Seçme

useCallback ile Kararlı İşlevler

const logout = useCallback(() => {
  clearSession();
  setUser(null);
}, []);

const value = useMemo(() => ({ user, logout }), [user, logout]);

Önbelleğe Almanın Gereksiz Olduğu Durumlar

İlkel Değerler Zaten Kararlıdır

// No useMemo needed for primitives
<ThemeCtx.Provider value={isDark ? 'dark' : 'light'}>
  {children}
</ThemeCtx.Provider>

Önbelleğe Almanın Etkisini Profil Oluşturmayla İnceleme

İç İçe Önbelleğe Alınmış Context'ler

Provider Bileşeni Düzeni

export function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  const logout = useCallback(() => setUser(null), []);
  const value = useMemo(() => ({ user, logout }), [user, logout]);
  return <UserCtx.Provider value={value}>{children}</UserCtx.Provider>;
}

export const useUser = () => useContext(UserCtx);

Hızlı Kontrol

Özet

Sırada