Какие hooks для работы с API применяются на практике и какие задачи они решают?
Хуки
Для работы с API в React-практике сложился стандартный набор хуков — от библиотечных (основной путь) до самописных.
TanStack Query — рабочая лошадка
useQuery — чтение данных:
const { data, isPending, error } = useQuery({
queryKey: ['orders', page],
queryFn: () => api.getOrders(page),
});Решает: кеширование по ключу, дедупликацию запросов, статусы, фоновое обновление (stale-while-revalidate), ретраи, refetch при фокусе.
useMutation — изменения:
const { mutate, isPending } = useMutation({
mutationFn: api.createOrder,
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['orders'] }),
});Решает: статусы отправки, инвалидацию кеша, оптимистичные обновления с откатом.
useInfiniteQuery — пагинация/бесконечный скролл (страницы, fetchNextPage); useSuspenseQuery — интеграция с Suspense (без ручных isLoading).
RTK Query (если стек Redux)
Автогенерируемые хуки из описания API: useGetOrdersQuery(page), useCreateOrderMutation() — те же задачи (кеш, статусы, инвалидация по тегам), интегрировано со стором.
SWR — лёгкая альтернатива
useSWR(key, fetcher) — кеш + ревалидация; меньше возможностей, проще старт.
Самописные хуки
useFetch/useApi на useEffect+useState — учебный вариант: нужно самому решать отмену (AbortController), гонки, кеш; в проде проигрывает библиотекам. Осмысленные кастомные хуки — обёртки над библиотечными с доменной семантикой: useOrders(page) внутри вызывает useQuery — компоненты не знают о ключах кеша.
Коротко для собеседования
Практический стандарт — TanStack Query: useQuery (кеш, статусы, дедупликация), useMutation (изменения + инвалидация, оптимистичные апдейты), useInfiniteQuery (пагинация); в Redux-стеке — автохуки RTK Query; SWR — лёгкий аналог. Свои хуки — тонкие доменные обёртки (useOrders) поверх библиотек, а не ручной fetch в useEffect.