Состояние: React Query, Zustand
Состояние бывает двух видов: серверное (данные с API) и клиентское (ui-флаги, корзина). Для каждого — свой инструмент, а не «голый» useEffect + useState.
React Query: серверное состояние
import { useQuery, useMutation } from "@tanstack/react-query";
function Posts() {
const { data, isLoading, refetch } = useQuery({
queryKey: ["posts"],
queryFn: () => fetch("/api/v1/posts").then(r => r.json())
});
// кэш, refetch при фокусе окна, статусы — из коробки
}
Zustand: клиентское состояние
import { create } from "zustand";
export const useCart = create((set) => ({
items: [],
add: (id) => set((s) => ({ items: [...s.items, id] })),
reset: () => set({ items: [] })
}));
// в компоненте:
const items = useCart((s) => s.items);
ℹ️
Redux тоже жив и работает, но для 90% приложений Zustand/React Query дают тот же результат с десятой частью кода. На собеседовании достаточно уметь объяснить разницу серверного и клиентского состояния.
💡
Правило-ориентир: если данные пришли с сервера — React Query; если локальный флаг/настройка — useState или Zustand; если и то и другое — подумайте, что лишнее.