Чем можно заменить стейт-менеджер в React?

Альтернативы стейт-менеджерам в React

В современной React-экосистеме существует множество способов управления состоянием без использования классических стейт-менеджеров (Redux, MobX, Zustand и т.д.). Выбор альтернативы зависит от масштаба приложения, сложности состояния и требований к производительности.

Встроенные возможности React

1. useState и useContext

Комбинация этих хуков позволяет создавать глобальное состояние без внешних библиотек:

// Создаем контекст
const AppContext = React.createContext();

export const AppProvider = ({ children }) => {
  const [state, setState] = useState({ user: null, theme: 'light' });
  
  const updateUser = (userData) => {
    setState(prev => ({ ...prev, user: userData }));
  };
  
  return (
    <AppContext.Provider value={{ state, updateUser }}>
      {children}
    </AppContext.Provider>
  );
};

// Использование в компоненте
const UserProfile = () => {
  const { state, updateUser } = useContext(AppContext);
  
  return (
    <div>
      <h2>{state.user?.name}</h2>
      <button onClick={() => updateUser({ name: 'Иван' })}>
        Обновить пользователя
      </button>
    </div>
  );
};

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

• Нет внешних зависимостей
• Простая реализация для небольших приложений
• Полная интеграция с React-экосистемой

Недостатки:

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

2. useReducer + useContext

Для более сложной логики обновления состояния:

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

const CounterProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  
  return (
    <CounterContext.Provider value={{ state, dispatch }}>
      {children}
    </CounterContext.Provider>
  );
};

3. React Query / TanStack Query

Специализированная библиотека для управления серверным состоянием:

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

const UserList = () => {
  const queryClient = useQueryClient();
  
  // Автоматическое кэширование, обновление, инвалидация
  const { data: users, isLoading } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers
  });
  
  const mutation = useMutation({
    mutationFn: addUser,
    onSuccess: () => {
      queryClient.invalidateQueries(['users']);
    }
  });
  
  if (isLoading) return 'Загрузка...';
  
  return (
    <div>
      {users.map(user => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  );
};

4. URL как состояние

Использование URL-параметров и query-строк для управления состоянием:

import { useSearchParams } from 'react-router-dom';

const FilterComponent = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  
  const currentFilter = searchParams.get('filter') || 'all';
  
  const handleFilterChange = (filter) => {
    setSearchParams({ filter, page: '1' });
  };
  
  return (
    <select 
      value={currentFilter}
      onChange={(e) => handleFilterChange(e.target.value)}
    >
      <option value="all">Все</option>
      <option value="active">Активные</option>
    </select>
  );
};

5. Локальное хранилище браузера

Для сохранения состояния между сессиями:

const usePersistentState = (key, initialValue) => {
  const [state, setState] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });
  
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(state));
  }, [key, state]);
  
  return [state, setState];
};

6. Композиция компонентов и подъём состояния

Простая альтернатива для родственных компонентов:

const ParentComponent = () => {
  const [sharedState, setSharedState] = useState('');
  
  return (
    <>
      <ChildA value={sharedState} onChange={setSharedState} />
      <ChildB value={sharedState} />
    </>
  );
};

7. Кастомные хуки (Custom Hooks)

Инкапсуляция логики состояния в переиспользуемые хуки:

const useAuth = () => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    // Логика проверки аутентификации
    checkAuth().then(userData => {
      setUser(userData);
      setLoading(false);
    });
  }, []);
  
  const login = async (credentials) => {
    const userData = await performLogin(credentials);
    setUser(userData);
  };
  
  return { user, loading, login, logout: () => setUser(null) };
};

// Использование в любом компоненте
const Header = () => {
  const { user, logout } = useAuth();
  
  return user ? (
    <button onClick={logout}>Выйти</button>
  ) : null;
};

Критерии выбора альтернативы

Когда всё же нужен стейт-менеджер

Сторонние стейт-менеджеры остаются предпочтительными для:

• Крупных enterprise-приложений со сложным глобальным состоянием
• Необходимости продвинутой отладки (Redux DevTools)
• Требований к предсказуемости состояния (immutable updates)
• Микрофронтенд-архитектур
• Сложной middleware-логики (сайд-эффекты, логирование)

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