Menghafalkan Nilai Context dengan useMemo

Selamat datang

Masalah Referensi Objek

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

Memperbaiki dengan useMemo

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

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

Memilih Dependensi dengan Cermat

Fungsi Stabil dengan useCallback

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

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

Saat Memoisasi Tidak Diperlukan

Nilai Primitif Sudah Stabil

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

Membuat Profil Dampak Memoisasi

Konteks Termemoisasi Bersarang

Pola Komponen Penyedia

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);

Pemeriksaan Singkat

Rangkuman

Berikutnya