PassFront
  1. PassFront
  2. База знаний
  3. Хуки

Какие 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.

Другие вопросы раздела