Context-Werte mit useMemo memoizen

Willkommen

Das Problem mit Objektreferenzen

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

Mit useMemo beheben

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

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

Abhängigkeiten sorgfältig auswählen

Stabile Funktionen mit useCallback

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

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

Wann Memoization unnötig ist

Primitive Werte sind bereits stabil

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

Auswirkungen von Memoization profilieren

Verschachtelte memoizierte Contexts

Das Muster der Provider-Komponente

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

Kurze Überprüfung

Zusammenfassung

Als Nächstes