Why use React Query / SWR instead of fetching in useEffect?
Quick answer
They handle caching, deduplication, background refetch, retries, pagination, and loading/error states — solving server-state problems effects don't.
In detail
Hand-rolled useEffect fetching forces you to reimplement caching, race-condition handling, refetch-on-focus, retries, and loading/error tracking for every call. React Query/SWR treat server data as a cache keyed by query, dedupe identical requests, keep data fresh in the background, and expose status flags. Less code, fewer bugs, better UX.
const { data, isLoading, error } = useQuery({
queryKey: ['kit', slug],
queryFn: () => fetch(`/api/kits/${slug}`).then(r => r.json()),
});Why interviewers ask this: Tests awareness of server-state best practices.
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399