Next move: Ban useQuery anywhere except /hooks. Set up ESLint's no-restricted-imports. Do the same for fetch. If someone tries to sneak around it, linter blocks the PR. No more debates, no more leaks.

Here's how to fix it. Stop sprinkling useQuery everywhere. Wrap every query in a custom hook. Yes, every single one. Dump them all into /hooks.

TanStack Queryの機能を自分で組み上げてみる記事が面白いです。useQueryが裏でどう状態を管理し、なぜコンポーネント間でデータが共有されるのか。その仕組みを紐解くことで、普段の便利さがより深く理解できそう。ライブラリの設計思想に触れたい時に読んでみてほしいです。 zenn.dev/ficilcom/articles/f…

Друг зае**л спамить адресами для оценки — запилил ему дашборд на React. Бекенд — простой Express прокси к Zillow API. Но главный кайф — TanStack Query: кеширование, параллельные запросы и zero боли с data layer. useQuery useQueries = маг… frntnts.ru/posts/2026-06-09-…

useQuery/useMutationをゼロから自作。状態をReact外に置きuseSyncExternalStoreで購読する分業が肝。queryKey共有とin-flight Promiseでdedup、status/fetchStatus2軸でstale-while-revalidate、invalidateで再同期 / TanStack Query を完全にゼロから実装して理解する zenn.dev/ficilcom/articles/f…

React devs, you see this in every beginner tutorial: useEffect(() => { fetchUsers(); }); …and you think yeah, that’s how you fetch data. But In production nobody fetches like this. Not even close. Production code has few options: 1) TanStack Query (the undisputed king in 2026) It’s not just fetching it’s a full data synchronization engine: - Automatic caching deduplication (no duplicate calls) - Background refetching, stale-while-revalidate, polling - Built-in loading, error, and success states - Infinite queries pagination out of the box - Mutations with optimistic updates & rollback - Devtools that show you exactly what’s happening - Request cancellation built-in You just write `useQuery` and move on. Clean. Powerful. Battle-tested. 2) Or your team’s custom data layer (the 'we built it ourselves' route) A heavily opinionated helper function/custom hook that does all the heavy lifting so your components stay very simple: - Axios instance with interceptors for: - Dynamic headers (Content-Type, Accept, custom tracking) - Auth (JWT/Bearer automatic token refresh on 401) - BaseURL switching per environment - AbortController logic in every request (cleanup on unmount so then no memory leaks or race conditions) - Retry logic with exponential backoff - Global error handler -->> toast notifications or error boundaries - Infinite scroll / pagination logic (IntersectionObserver cursor-based or offset) - Request deduping loading state management (spinner or skeleton) - Type safety runtime validation (Zod) - Analytics tracking on every API call (if needed) - Timeout rate-limit protection The component? Looks like: const { data, isLoading } = useUsers(); That is it. Everything else is abstracted away. Tutorials show the toy version, most times. Production ships the system. So next time you see a raw `fetch` inside `useEffect` with no dependency array… you already know what the PR comment will be What is YOUR production data-fetching setup?

3/ TanStack Query will save your life — and your sanity Before I discovered it, my data fetching looked like this: const [data, setData] = useState(null) const [loading, setLoading] = useState(false) const [error, setError] = useState(null) useEffect(() => { setLoading(true) fetch('/api/something') .then(res => res.json()) .then(setData) .catch(setError) .finally(() => setLoading(false)) }, []) Every. Single. Component. TanStack Query replaces all of that with: const { data, isLoading, error } = useQuery({ queryKey: ['something'], queryFn: fetchSomething }) And you also get: → Automatic caching → Background refetching → Retry on failure → Stale data handling → Pagination support I use it on every project now. No exceptions.

developer after working with useCallback useMemo and useQuery to stop taking down backend in a flood of requests because of function pointer redeclaration causing over rerendering bug

I replaced all of that boilerplate with: const { data, isLoading, error } = useQuery({ queryKey: ['my-data'], queryFn: () => fetch('/api/...').then(r => r.json()) }) That's it.Simple Loading state, error handling, caching and background refetching l just love it.

Yes useQuery has reduced the code duplication also error handling is neatly designed

Step 4/4: In your Client Component, call `useQuery(getPostsQueryOpts())`. React Query finds the hydrated data in its cache and skips the fetch. First render is instant — and you're still reactive for updates.

Bad prompt: "Build me a data fetching hook in React" Good prompt: "Build me a data fetching hook using React Query v5's useQuery in a React 18 TypeScript 5 project. Follow TanStack Query v5 syntax (not v4)." Same request. Completely different quality of output.

The pending states when using tanstack query is quite much. I always get confused in which to use especially between the isLoading and isPending of useQuery @tan_stack

the useQuery example is great though idiomatic, explicit, short and easy to customise

Realtime with Supabase : - write the query - write a separate subscription - keep both in sync - hope for the best With Convex? Just useQuery(). That's it. That's what made me switch. Full breakdown here 👇 (Links in comments).

❌ Over-fetching data on every render. No caching. No deduplication. Just vibes. ✅ TanStack Query fixes this in 10 lines: ```ts const { data } = useQuery({ queryKey: ['user', id], staleTime: 1000 * 60 * 5 }) ``` Stop hammering your API. Let the cache work. 🔥

TanStack Router と Query の責務分離がかなり整理されている記事 Router の loader は Query と組み合わせるならデータを返す場所ではなく、Query Cache を先に温めるイベントハンドラとして扱う キャッシュ管理は Query に寄せ、コンポーネント側では useQuery / useSuspenseQuery で購読する

いわゆるLoaderパターン(pageでデータ全部とってくる)があまり好みではないのですが、TanStack Startはloader使わなくてもuseQueryがあるので気が楽ですね

useQuery などのライブラリ側でユニオン型になってくれれば〜と思ったけど、ビジネスロジックに関わるからアプリケーション側でやるので正しそう。 #TSKaigi #tskaigi_leverages

Now I let TanStack Query do its job cache, background refetch, and stale while revalidate. No more dumping into separate state. Instead, I create a custom hook that calls useQuery and returns the data helpers.