В чем разница между использованием state-менеджеров и контекстным написанием?

Разница между state-менеджерами и Context API

Определение

Context API — встроенный механизм React для передачи данных сквозь дерево компонентов без "prop drilling". State-менеджеры (Redux, Zustand, MobX, Recoil) — это внешние библиотеки для управления глобальным состоянием приложения с дополнительными функциями.

Context API

Как это работает:

const AuthContext = createContext(null);

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Загружаем пользователя при монтировании
    fetchUser().then(setUser).finally(() => setLoading(false));
  }, []);

  return (
    <AuthContext.Provider value={{ user, setUser, loading }}>
      {children}
    </AuthContext.Provider>
  );
}

// В компоненте
const { user, loading } = useContext(AuthContext);

Преимущества:

• Встроено в React, нет зависимостей
• Простое для маленьких проектов
• Минимальный overhead
• Идеально для темы (dark/light mode)

Недостатки:

• Все подписчики перерисовываются при изменении контекста (нет мемоизации по умолчанию)
• Отсутствует инструментарий для отладки (DevTools)
• Нет встроенной системы для асинхронных действий
• Сложнее с большим состоянием

State-менеджеры

Пример с Redux:

import { createSlice, configureStore } from @reduxjs/toolkit;

const authSlice = createSlice({
  name: auth,
  initialState: { user: null, loading: true },
  reducers: {
    setUser: (state, action) => {
      state.user = action.payload;
    },
    setLoading: (state, action) => {
      state.loading = action.payload;
    }
  }
});

const store = configureStore({
  reducer: { auth: authSlice.reducer }
});

// В компоненте
const user = useSelector(state => state.auth.user);
const dispatch = useDispatch();
dispatch(authSlice.actions.setUser(newUser));

Пример с Zustand (проще):

import { create } from zustand;

const useAuthStore = create((set) => ({
  user: null,
  loading: true,
  setUser: (user) => set({ user }),
  setLoading: (loading) => set({ loading })
}));

// В компоненте
const { user, loading } = useAuthStore();
const setUser = useAuthStore((state) => state.setUser);

Преимущества:

• Оптимизация производительности (подписка только на нужные части состояния)
• Мощный инструментарий (Redux DevTools, time-travel debugging)
• Middleware для асинхронных операций (thunks, sagas)
• Лучшая организация больших приложений
• Неизменяемость данных по умолчанию
• Легче тестировать

Недостатки:

• Больше boilerplate кода
• Дополнительная зависимость
• Кривая обучения
• Может быть оверкилл для простых случаев

Сравнительная таблица

Проблема с Context API и производительностью

// Проблема: весь компонент перерисуется при любом изменении
const { user, theme, notifications } = useContext(AppContext);

// Решение 1: разделить на несколько контекстов
const user = useContext(UserContext);
const theme = useContext(ThemeContext);
const notifications = useContext(NotificationsContext);

// Решение 2: использовать selector pattern (как в Redux)
const user = useSelector(state => state.user);

Рекомендации

Используй Context API:

• Маленькие приложения
• Нечасто меняющееся состояние (тема, язык)
• Одноразовые значения (auth для начальной загрузки)

Используй state-менеджер:

• Часто меняющееся состояние (данные пользователя, уведомления)
• Сложная логика обновления состояния
• Нужна отладка и время-путешествие
• Команда с несколькими разработчиками
• Требуется оптимизация производительности

Гибридный подход:

// Redux для основного состояния
// Context для темы и локали (редко меняется)
// useState для локального UI состояния (формы)