Когда лучше использовать state-менеджеры?

Когда использовать state-менеджеры

Определение

State-менеджер - это библиотека или паттерн для централизованного управления глобальным состоянием приложения. Примеры: Redux, Zustand, MobX, Recoil, Pinia (Vue), Akita.

Когда state-менеджер НЕ нужен

Сначала понять, когда его точно не требуется:

1. Простое приложение - если в приложении < 5-10 компонентов, встроенного useState достаточно

2. Props drilling не критичен - когда данные передаются через 2-3 уровня компонентов, это нормально

3. Состояние уникально для компонента - если состояние используется только в одном компоненте (например, открыта ли модалка), используй локальный useState

4. Сервер является источником истины - если данные всегда приходят с бэкенда и не кэшируются (например, список пользователей), используй обычный fetch с хуком

Пример: не нужен менеджер

function Modal() {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open</button>
      {isOpen && <ModalContent onClose={() => setIsOpen(false)} />}
    </>
  );
}

Когда state-менеджер НУЖЕН

1. Props drilling

Когда нужно передать данные через много уровней компонентов:

// Props drilling
function App() {
  const [user, setUser] = useState(null);
  return <Level1 user={user} />;
}

function Level1({ user }) {
  return <Level2 user={user} />;
}

function Level2({ user }) {
  return <Level3 user={user} />;
}

function Level3({ user }) {
  return <div>{user?.name}</div>;
}

// State-менеджер
const userStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user })
}));

function Level3() {
  const user = userStore((state) => state.user);
  return <div>{user?.name}</div>;
}

2. Сложное состояние приложения

Когда состояние имеет много связанных полей и логики:

// Плохо: много useState
function App() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);
  const [filters, setFilters] = useState({});
  const [sort, setSort] = useState('asc');
  const [page, setPage] = useState(1);
}

// Хорошо: state-менеджер
const useAppStore = create((set) => ({
  loading: false,
  error: null,
  data: null,
  filters: {},
  sort: 'asc',
  page: 1,
  setLoading: (loading) => set({ loading }),
  setData: (data) => set({ data })
}));

3. Общее состояние между различными частями приложения

Например: тема (light/dark), авторизация, язык интерфейса

const useThemeStore = create((set) => ({
  theme: 'light',
  toggleTheme: () => set((state) => ({
    theme: state.theme === 'light' ? 'dark' : 'light'
  }))
}));

// Используется везде
function Header() {
  const theme = useThemeStore((state) => state.theme);
  return <header className={theme}>...</header>;
}

4. Кэширование данных

Когда нужно кэшировать данные с бэкенда:

const usePostStore = create((set) => ({
  posts: [],
  fetchPosts: async (id) => {
    const response = await fetch(`/api/posts/${id}`);
    const posts = await response.json();
    set({ posts });
  }
}));

5. Синхронизация состояния между вкладками

Когда нужна синхронизация между разными вкладками браузера:

const useSharedStore = create(
  persist(
    (set) => ({
      notification: null,
      setNotification: (notification) => set({ notification })
    }),
    { name: 'notification-storage' }
  )
);

Какой выбрать?

Context API - для маленьких приложений, встроенное в React Zustand - минималистичный, быстрый, идеален для средних проектов Redux - для больших приложений с очень сложным состоянием TanStack Query - специализирован для кэширования данных с API Recoil - атомарный подход, хорош для сложных зависимостей

Рекомендуемый подход

1. Начни с React Context - встроено, не требует зависимостей
2. Если props drilling - добавь Zustand (минимальный оверхед)
3. Если работаешь с API - используй TanStack Query для кэширования
4. Если огромное приложение - переходи на Redux

Вывод

State-менеджер нужен, когда:

• Props drilling становится проблемой
• Состояние очень сложное и связанное
• Нужно кэшировать данные
• Нужна глобальная синхронизация (авторизация, тема)

Не усложняй - начни с простого, добавляй tools по мере необходимости.