Нужен ли стейт-менеджер

Нужен ли стейт-менеджер

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

Не всегда. Начните с встроенного состояния React (useState, useContext), и добавляйте стейт-менеджер только когда появляется реальная проблема. Это следует принципу KISS (Keep It Simple, Stupid).

Встроенные инструменты React

1. useState

// Локальное состояние компонента
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
}

2. useContext + useReducer

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function MyComponent() {
  const { theme, setTheme } = useContext(ThemeContext);
  return <button onClick={() => setTheme('dark')}>Dark</button>;
}

3. React Server Components (RSC)

В Next.js можно получать данные прямо в компоненте на сервере:

// app/page.tsx
async function Page() {
  const data = await fetch('https://api.example.com/data');
  
  return <h1>{data.title}</h1>;
}

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

Признаки того, что нужен стейт-менеджер

1. Prop drilling: передаёшь пропсы через 5+ уровней компонентов

// Плохо: prop drilling
<GrandParent>
  <Parent user={user}>
    <Child user={user}>
      <GrandChild user={user}>
        <GreatGrandChild user={user} />
      </GrandChild>
    </Child>
  </Parent>
</GrandParent>

1. Сложное глобальное состояние: auth, язык, тема, permissions
2. Асинхронные операции: загрузка данных, кэширование
3. Синхронизация между вкладками: например, logout в одной вкладке должен разлогинить в другой

Рекомендуемые стейт-менеджеры

1. TanStack Query (React Query)

Для асинхронных данных и кэширования:

function Posts() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['posts'],
    queryFn: async () => {
      const res = await fetch('/api/posts');
      return res.json();
    },
  });
  
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error</div>;
  
  return <div>{data.map(post => <Post key={post.id} post={post} />)}</div>;
}

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

• Автоматическое кэширование
• Синхронизация данных с сервером
• Retries, pagination, infinite scroll из коробки
• Не нужно писать код для loading/error состояний

2. Zustand

Для простого глобального состояния:

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);
  
  return (
    <>
      <p>{count}</p>
      <button onClick={increment}>+</button>
    </>
  );
}

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

• Лёгкий и быстрый
• Минимальный boilerplate
• Хорошо для небольших приложений

3. Redux (Redux Toolkit)

Для больших приложений:

const countSlice = createSlice({
  name: 'count',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
  },
});

function Counter() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();
  
  return (
    <>
      <p>{count}</p>
      <button onClick={() => dispatch(increment())}>+</button>
    </>
  );
}

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

• Масштабируется до очень больших приложений
• Отличное DevTools для отладки
• Большое сообщество

Недостатки:

• Много boilerplate
• Крутая кривая обучения

Рекомендуемая архитектура

StateManagement
  1. useState для локального состояния
  2. useContext для простого глобального
  3. TanStack Query для асинхронных данных
  4. Zustand для клиентского состояния (фильтры, сортировка)
  5. Redux только если очень нужно

Практический пример

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

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AuthProvider>
        <MainLayout />
      </AuthProvider>
    </QueryClientProvider>
  );
}

function Posts() {
  // Асинхронные данные — TanStack Query
  const { data: posts } = useQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts,
  });
  
  // Локальное состояние — useState
  const [filter, setFilter] = useState('');
  
  // Глобальное состояние — useContext
  const { user } = useAuth();
  
  return (
    <div>
      {posts?.filter(p => p.title.includes(filter)).map(post => (
        <Post key={post.id} post={post} />
      ))}
    </div>
  );
}

Вывод

Начни просто, добавляй сложность когда нужна. Большинство приложений могут обойтись без глобального стейт-менеджера, используя комбинацию React Context + TanStack Query. Redux нужен редко, и часто это признак, что архитектура приложения не оптимальна.