Q303- What is React Query? Have you used it, and what problem does it solve?

React Query (now commonly called TanStack Query) is a data-fetching and server-state management library for React.

It helps you fetch, cache, sync, and update server data efficiently — without manually managing loading, error, and cache states.

React Query manages server state, not client/UI state.

---

❓ What Problem Does React Query Solve?

❌ Problems without React Query

When fetching data manually with useEffect + useState, you usually deal with:

• Duplicate API calls
• Manual loading & error states
• Cache invalidation headaches
• Refetch logic on focus / reconnect
• Stale data issues
• Complex state management

useEffect(() => {
  setLoading(true);
  fetchData()
    .then(setData)
    .catch(setError)
    .finally(() => setLoading(false));
}, []);

Messy and repetitive ❌

---

✅ How React Query Solves This

React Query provides:

• Automatic caching
• Background refetching
• Stale data handling
• Retry & error handling
• Pagination & infinite queries
• Optimistic updates
• Deduplication of requests

All with minimal code.

---

🧪 Basic Example Using React Query

import { useQuery } from "@tanstack/react-query";

function Users() {
  const { data, isLoading, error } = useQuery({
    queryKey: ["users"],
    queryFn: () => fetch("/api/users").then(res => res.json())
  });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error occurred</p>;

  return <ul>{data.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

✔ No useEffect
✔ No manual loading/error state
✔ Cached automatically

---

🔥 Key Features (Interview Gold)

1️⃣ Caching

Data is cached by queryKey.

queryKey: ["users"]

Same key → no duplicate API calls.

---

2️⃣ Automatic Refetching

Refetches when:

• Window regains focus
• Network reconnects
• Query becomes stale

---

3️⃣ Stale-While-Revalidate

Shows cached data instantly while fetching fresh data in background.

---

4️⃣ Mutations (POST / PUT / DELETE)

useMutation({
  mutationFn: addUser,
  onSuccess: () => {
    queryClient.invalidateQueries(["users"]);
  }
});

✔ Automatic cache sync after updates

---

5️⃣ Optimistic Updates

Update UI before API success, rollback on failure.

---

6️⃣ Pagination & Infinite Scroll

Built-in support using useInfiniteQuery.

---

🆚 React Query vs Redux

Feature	React Query	Redux
Manages	Server state	Client state
API calls	Built-in	Manual
Caching	Automatic	Manual
Boilerplate	Very low	High
Best for	Data fetching	UI/global state

👉 They work together, not replace each other.

---

🎯 Have You Used It? (Sample Interview Answer)

Yes, I’ve used React Query for API data fetching and caching.
It simplified handling loading, errors, retries, and caching.
It helped avoid duplicate API calls, improved performance with stale-while-revalidate, and made server-state management much cleaner compared to manual useEffect logic.

---

🎯 Short Interview Answer

React Query is a data-fetching and caching library that manages server state in React.
It solves problems like manual loading/error handling, duplicate requests, stale data, and cache invalidation, making data fetching faster, cleaner, and more reliable.

---

⭐ One-Line Summary

React Query removes the pain of server-state management in React.