intermediate
Cache invalidation
Define query keys, freshness, invalidation triggers, refetch timing, and stale data tolerance.
Server-state caches key data by hierarchical query keys — `['users', id]` — so partial invalidation targets related queries after mutations. Stale time and cache time control how long data is fresh versus retained. Refetch on window focus or reconnect is configurable.
Invalidate after successful mutations; optimistically update only when rollback is defined. Over-invalidation causes UI flicker; under-invalidation shows stale lists.
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:
- Structured query keys mirror resources.
- Invalidate related queries after writes.
- Tune stale versus cache time deliberately.