How to Stop Unwanted Api Calls with Stale Time 2025
How to Stop Unwanted API Calls with staleTime in React Query 2025
React Query by default har baar component mount hone par API call karta hai, agar data stale ho.
Lekin agar aap staleTime set kar dete ho, to React Query us time tak data ko fresh maanta hai
aur unnecessary API calls nahi karta.
1. What is staleTime?
staleTime ek time duration hai (in milliseconds) jisme query data fresh maana jata hai.
Jab tak yeh time khatam nahi hota, React Query API call dubara nahi karega.
useQuery({
queryKey: ['posts'],
queryFn: fetchPosts,
staleTime: 1000 * 60 * 5 // 5 minutes
});
2. Default Behavior (Without staleTime)
Agar aap staleTime nahi set karte, to data mount hone ke turant baad stale maan liya jata hai
aur har baar component render hone par API call hoti hai.
useQuery({
queryKey: ['todos'],
queryFn: fetchTodos
});
// API call on every mount if data is not fresh
3. Avoiding Re-fetch with staleTime
Niche example mein, 1 hour tak data fresh rahega aur re-fetch nahi hoga:
useQuery({
queryKey: ['userProfile'],
queryFn: fetchUserProfile,
staleTime: 1000 * 60 * 60 // 1 hour
});
4. Use Case: Dashboard or Profile Page
Aise pages jahan frequently data change nahi hota, unmein staleTime ka use karke performance improve ki ja sakti hai.
5. Tips
- Short staleTime: Real-time data jahan zaroori ho (like chat, live updates).
- Long staleTime: Static or rarely changing data (like profile, config).
staleTime: Infinity se data kabhi stale nahi hoga, aur kabhi automatic refetch nahi hoga.
useQuery({
queryKey: ['settings'],
queryFn: fetchSettings,
staleTime: Infinity
});
6. Conclusion
staleTime ka use karke aap React Query mein unwanted API calls ko stop kar sakte ho.
Ye performance aur user experience dono ke liye helpful hota hai.