Мемоизация значений контекста с помощью useMemo

Добро пожаловать

Проблема ссылки на объект

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

Исправление с помощью useMemo

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

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

Тщательный выбор зависимостей

Стабильные функции с useCallback

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

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

Когда мемоизация не нужна

Примитивные значения уже стабильны

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

Профилирование эффекта мемоизации

Вложенные мемоизированные контексты

Шаблон компонента-провайдера

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

Быстрая проверка

Итоги

Далее