SWR

SWR fetches by cache key and returns cached data immediately while revalidating in the background. Focus refetch, deduplication, and lightweight API suit many dashboard reads. `mutate` updates local cache or triggers revalidation.

Compare with TanStack Query when you need richer mutation tooling or granular invalidation trees. SWR pairs well with Next.js data patterns and simple read-heavy pages.

On interviews, explain the concept with a concrete example and name the behavior interviewers probe.

Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.

The trade-off is often clarity versus reuse or explicit props versus convenience.

Checklist:

• Cache key identifies the fetcher resource.
• mutate for local cache updates.
• Handle error and isValidating in UI.