11. Devtools и диагностика производительности

React Query Devtools должны быть включены почти в каждом проекте на этапе разработки. Это самый быстрый способ понять:

• почему что-то перефетчивается
• какие ключи живут в кеше
• какие запросы stale
• что происходит с mutation cache

Подключение

import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

<QueryClientProvider client={queryClient}>
  <App />
  {import.meta.env.DEV ? <ReactQueryDevtools initialIsOpen={false} /> : null}
</QueryClientProvider>

Что смотреть в Devtools

• queryKey
• status
• fetchStatus
• dataUpdatedAt
• observers count
• stale/fresh состояние
• mutation queue

Если у вас странное поведение, Devtools почти всегда показывают, проблема в:

• ключе
• staleTime
• enabled
• повторном маунте

На что смотреть первым

1. Совпадает ли queryKey с тем, что вы ожидаете.
2. Не stale ли запрос мгновенно из-за staleTime: 0.
3. Нет ли лишних observers.
4. Не срабатывает ли refetchOnWindowFocus.
5. Нет ли лишних invalidation после mutation.

useIsFetching и useIsMutating

const globalFetching = useIsFetching()
const globalMutating = useIsMutating()

Это хороший способ быстро понять, реально ли приложение “занято”, или проблема только в одном локальном компоненте.

Подписка на cache events

const unsubscribe = queryClient.getQueryCache().subscribe((event) => {
  if (event?.type === 'updated') {
    console.debug('Query updated', event.query.queryKey)
  }
})

Это полезно для:

• отладки
• собственной аналитики
• связки с performance marks

Что означает много ререндеров

Сначала проверьте:

• не делаете ли object rest destructuring у результата query
• не меняется ли select на каждом рендере
• не создаются ли новые query options inline без необходимости

TanStack Query по умолчанию оптимизирует tracked properties, но это легко испортить неудачным паттерном кода.

Отличайте сетевую и React-проблему

Если Devtools показывают мало query updates, а компонент всё равно часто ререндерится, проблема, скорее всего, не в TanStack Query, а в родительском React-дереве.

Практические признаки проблем

• Один и тот же экран всё время refetch: чаще всего staleTime: 0 плюс focus/mount triggers.
• Данные не обновляются: часто это enabled: false или слишком узкая инвалидация.
• Пустой экран между страницами: забыли placeholderData.
• Дубли в infinite list: проблема в getNextPageParam или merge-логике.

Полезные привычки

• Держите Devtools включённым во время разработки.
• Смотрите реальные query keys, а не только код.
• Проверяйте dataUpdatedAt при жалобах на устаревшие данные.
• Используйте Devtools вместе с React Profiler, а не вместо него.