Какие знаешь альтернативы React контекста?

Альтернативы React Context API для управления состоянием

React Context — отличное встроенное решение для сквозной передачи данных без пропс-дриллинга, но у него есть ограничения: повторные рендеры всех потребителей при изменении контекста, сложность с оптимизацией и отсутствие встроенного механизма для асинхронных операций. Вот основные альтернативы, которые я использую в зависимости от требований проекта.

1. Библиотеки управления состоянием (State Management Libraries)

Redux (с Toolkit)

Самый популярный выбор для сложных enterprise-приложений. Redux предлагает централизованное хранилище с предсказуемым обновлением через редьюсеры.

// Пример с Redux Toolkit
import { createSlice, configureStore } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1; },
  },
});

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

• Преимущества: Инструменты разработчика, middleware (thunk/saga), строгая архитектура.
• Недостатки: Бойлерплейт, избыточен для простых задач.

MobX

Использует реактивное программирование и observable-объекты. Более императивный подход по сравнению с Redux.

import { makeAutoObservable } from 'mobx';

class CounterStore {
  count = 0;
  constructor() { makeAutoObservable(this); }
  
  increment() { this.count += 1; }
}

• Преимущества: Минимум кода, автоматическое отслеживание зависимостей.
• Недостатки: Меньше контроля, "магия" под капотом.

Zustand

Легковесная библиотека с минимальным API, использует хуки и иммутабельные обновления.

import create from 'zustand';

const useStore = create(set => ({
  bears: 0,
  increase: () => set(state => ({ bears: state.bears + 1 })),
}));

• Преимущества: Простота, отсутствие оберток Provider, отличная TypeScript поддержка.
• Недостатки: Меньше возможностей для сложных сценариев.

2. Композиция компонентов и Props

Иногда Context — это избыточно, и достаточно правильной композиции компонентов:

• Render Props: Передача компонента как пропса для инкапсуляции логики.
• Компоненты-провайдеры: Специализированные компоненты, управляющие своим состоянием и дочерними элементами.
• Кастомные хуки: Для изоляции и переиспользования логики состояния.

// Кастомный хук + композиция
const useAuth = () => {
  const [user, setUser] = useState(null);
  return { user, login: setUser };
};

// Использование без Context
const App = () => {
  const auth = useAuth();
  return <Header user={auth.user} />;
};

3. Серверное состояние (Server State)

Для данных с сервера Context часто не подходит — лучше специализированные инструменты:

React Query / TanStack Query

Управление асинхронным состоянием, кэширование, синхронизация, пагинация.

import { useQuery } from '@tanstack/react-query';

const { data } = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodos,
});

• Преимущества: Автоматическое кэширование, инвалидация, фоновое обновление.
• Недостатки: Оверкилл для локального состояния.

SWR (Stale-While-Revalidate)

Аналогичен React Query, но более минималистичный от Vercel.

4. Lightweight-альтернативы

Jotai

Атомарная state-библиотека, работает по принципу деривации атомов.

import { atom, useAtom } from 'jotai';

const countAtom = atom(0);
const Component = () => {
  const [count, setCount] = useAtom(countAtom);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
};

• Преимущества: Гибкая композиция, автоматическая оптимизация.

Recoil

Разработан Facebook, использует атомы и селекторы.

import { atom, useRecoilState } from 'recoil';

const textState = atom({ key: 'textState', default: '' });

• Преимущества: Интеграция с React-экосистемой, асинхронные селекторы.
• Недостатки: Экспериментальный статус, менее популярен.

5. Паттерны и встроенные механизмы React

• Lifting State Up: Подъем состояния до ближайшего общего предка.
• Комбинация useReducer + useContext: Для более сложной логики, чем useState.
• Portals: Для передачи данных в разные части DOM-дерева.

Критерии выбора

При выборе альтернативы я оцениваю:

1. Сложность приложения:
   • Малые проекты → Zustand/Jotai/Context
   • Крупные → Redux/MobX
2. Тип состояния:
   • Клиентское UI-состояние → Zustand/Recoil
   • Серверное состояние → React Query/SWR
3. Команда и экосистема:
   • Знакомство команды с Flux/MobX
   • Наличие готовых интеграций (роутинг, формы)
4. Производительность:
   • Частые обновления → MobX/Jotai
   • Предсказуемость обновлений → Redux/Zustand

Контекст остается оптимальным для статических или редко меняющихся данных (тема UI, локализация, аутентификационный объект), но для динамического состояния лучше использовать специализированные библиотеки. В современных проектах я часто комбинирую Zustand для клиентского состояния и TanStack Query для серверного — это дает баланс простоты и мощности без излишнего бойлерплейта Redux.