TanStack (React Query) – Complete Notes &
Interview Questions
1. What is TanStack (React Query)?
TanStack Query (formerly React Query) is a data-fetching and state management library for React.
It helps fetch, cache, synchronize, and update server data automatically without much code. It
keeps your UI in sync with your server data.
2. Main Advantages
Simplifies API calls • Built-in caching • Automatic background refetching • Offline and retry support •
Smart updates after mutations • DevTools for visualization • Easy pagination.
3. QueryClient and QueryClientProvider
QueryClient manages cache and background updates. Wrap your app with QueryClientProvider so
that all components can access it.
4. useQuery (GET Requests)
Used to fetch data. Example: useQuery({ queryKey: ['users'], queryFn: () =>
fetch('/api/users').then(res => [Link]()) })
5. useMutation (POST/PUT/DELETE)
Used for creating or updating data. Example: useMutation({ mutationFn: addUser, onSuccess: () =>
[Link](['users']) })
6. queryKey and queryFn
queryKey identifies data uniquely. queryFn defines how to fetch it.
7. staleTime and cacheTime
staleTime = how long data stays fresh before refetching. cacheTime = how long inactive data
remains in cache before deletion.
8. Background Refetching
Automatically refetches data when the window refocuses, network reconnects, or the query key is
reused.
9. Garbage Collection
Inactive cached data is deleted after cacheTime expires.
10. Basic Data Flow
Fetch → Cache → Use → Refetch → Update (Mutation).
11. Query Invalidation
Use [Link](['key']) to manually refresh cached data.
12. Prefetching Data
Use [Link](...) to load data before the page opens.
13. Dependent Queries
Run a query only after another query has finished (using the 'enabled' option).
14. Optimistic Updates
Show updated data instantly before the server confirms, then roll back if failed.
15. Pagination / Infinite Query
useInfiniteQuery helps load more data on scroll.
16. DevTools
ReactQueryDevtools show all query states visually. Example: import { ReactQueryDevtools } from
'@tanstack/react-query-devtools';
Interview Questions and Answers
Q1. What is React Query?
A: It manages server state, fetching, caching, and syncing automatically.
Q2. Difference between useQuery and useMutation?
A: useQuery → GET requests, useMutation → POST/PUT/DELETE requests.
Q3. Purpose of queryKey?
A: Uniquely identifies cached data for re-use and refetching.
Q4. staleTime vs cacheTime?
A: staleTime: duration data is fresh. cacheTime: duration cached before deletion.
Q5. How does background refetching work?
A: Refetches automatically when window refocuses or network reconnects.
Q6. What is query invalidation?
A: Manually refreshing cached data using invalidateQueries().
Q7. What are dependent queries?
A: Queries that wait for another query to finish before running.
Q8. What are optimistic updates?
A: UI updates immediately before server response to feel faster.
Q9. Purpose of QueryClient and QueryClientProvider?
A: Provide global cache and refetch management.
Q10. Why React Query instead of Redux?
A: React Query simplifies server state; Redux is better for client state.