Решают ли state management и Context одну и ту же задачу

Решают ли state management и Context одну и ту же задачу

Краткий ответ

Нет, это РАЗНЫЕ инструменты, решающие РАЗНЫЕ проблемы, хотя иногда их можно использовать вместе.

Что такое Context

Context - это встроенный механизм React для передачи данных через дерево компонентов без необходимости пробрасывать props через каждый уровень (prop drilling).

// Создаём Context
const AuthContext = createContext<AuthContextType | undefined>(undefined);

// Provider компонент
function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState(null);
  
  return (
    <AuthContext.Provider value={{ user, setUser }}>
      {children}
    </AuthContext.Provider>
  );
}

// Компонент использует Context
function UserProfile() {
  const { user } = useContext(AuthContext)!;
  return <div>Hello, {user?.name}</div>;
}

Что такое State Management

State Management (управление состоянием) - это библиотеки и паттерны для управления сложным состоянием приложения: Redux, Zustand, MobX, Recoil и т.п.

// Redux
const userSlice = createSlice({
  name: 'user',
  initialState: { user: null },
  reducers: {
    setUser: (state, action) => {
      state.user = action.payload;
    }
  }
});

function UserProfile() {
  const user = useSelector(state => state.user);
  const dispatch = useDispatch();
  
  return <div>Hello, {user?.name}</div>;
}

// Zustand
const useUserStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user })
}));

function UserProfile() {
  const user = useUserStore(state => state.user);
  return <div>Hello, {user?.name}</div>;
}

Таблица различий

Проблема: Context и перерендеры

Context перерендеривает ВСЕ компоненты, которые его используют, даже если изменилась только часть данных:

const AppContext = createContext<AppContextType>(initialState);

function App() {
  const [state, setState] = useState(initialState);
  
  // Каждое изменение state вызывает перерендер всех потребителей
  return (
    <AppContext.Provider value={state}>
      <UserList />  {/* Перерендер здесь */}
      <PostList />  {/* И здесь */}
      <Settings />  {/* И здесь */}
    </AppContext.Provider>
  );
}

// Проблема: если изменилась только одна пост, перерендерятся все компоненты

Решение: мемоизация

// Оборачиваем в useMemo
const value = useMemo(() => ({ state, setState }), [state]);

return (
  <AppContext.Provider value={value}>
    {children}
  </AppContext.Provider>
);

// Или splitting contexts - несколько контекстов
const UserContext = createContext(initialState);
const PostContext = createContext(initialState);

return (
  <UserContext.Provider value={userData}>
    <PostContext.Provider value={postData}>
      {children}
    </PostContext.Provider>
  </UserContext.Provider>
);

Реальные примеры использования

Context подходит для:

// 1. Глобальная тема
const ThemeContext = createContext<'light' | 'dark'>('light');

// 2. Авторизация
const AuthContext = createContext<User | null>(null);

// 3. Язык приложения
const LanguageContext = createContext<'en' | 'ru'>('en');

// 4. Модальные окна (простые)
const ModalContext = createContext<{ isOpen: boolean }>(...);

State Management подходит для:

// 1. Сложная фильтрация с множеством параметров
const filtersSlice = createSlice({
  name: 'filters',
  initialState: {
    category: null,
    priceRange: [0, 1000],
    rating: 0,
    inStock: true,
    searchQuery: '',
    sortBy: 'relevance'
  },
  reducers: {
    setCategory: ...,
    setPriceRange: ...,
    setRating: ...,
    // 10+ других reducers
  }
});

// 2. Асинхронные операции
const userSlice = createSlice({
  name: 'user',
  initialState: { user: null, loading: false, error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.user = action.payload;
      });
  }
});

// 3. История действий (undo/redo)
const editorStore = create((set) => ({
  history: [],
  future: [],
  undo: () => { /* логика */ },
  redo: () => { /* логика */ }
}));

Комбинирование Context и State Management

Часто используют ОБА вместе:

// State Management для бизнес-логики
const useUserStore = create((set) => ({
  user: null,
  fetchUser: async () => { /* ... */ }
}));

// Context для простых значений
const UIContext = createContext({ sidebarOpen: false });

function App() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  
  return (
    <UIContext.Provider value={{ sidebarOpen }}>
      <MainContent />
    </UIContext.Provider>
  );
}

function MainContent() {
  const user = useUserStore(state => state.user);
  const { sidebarOpen } = useContext(UIContext);
  
  return (
    <div className={sidebarOpen ? 'shifted' : ''}>
      <h1>Hello, {user?.name}</h1>
    </div>
  );
}

Когда использовать что

Используй Context когда:

• Данные редко меняются (тема, язык, user)
• Данные нужны только в нескольких компонентах
• Простая структура данных (несколько полей)
• Не нужны DevTools и логирование

Используй State Management когда:

• Часто меняющееся состояние (фильтры, форма)
• Сложная логика (вычисления, side effects)
• Нужна история действий (undo/redo)
• Много компонентов используют разные части состояния
• Нужна оптимизация производительности
• Требуется DevTools

Пример эволюции:

// Шаг 1: Начинаем с Context (просто)
const AppContext = createContext(initialState);

// Шаг 2: Context работает, но много перерендеров
// Добавляем мемоизацию и splitting

// Шаг 3: Все еще медленно и сложно
// Переходим на Redux/Zustand

const useAppStore = create((set) => ({
  // Бизнес-логика
}));

Ключевые выводы

• Context - для избежания prop drilling простых данных
• State Management - для сложного состояния и оптимизации
• Context НЕ = State Management, это разные инструменты
• Context может быть медленным при частых обновлениях
• State Management лучше масштабируется для больших приложений
• Можно использовать оба в одном приложении
• Выбор инструмента зависит от сложности и частоты обновлений