RTK Query Caching
Compare a naive fetch-heavy implementation with an RTK Query version that dedupes network traffic and invalidates on mutation.
The demo instruments request counts, cache hits, and render counts so you can see the impact of the caching strategy in real time.
Naive Fetch & Local State
Two components each call `fetch` inside `useEffect`, so every change triggers redundant network requests. Caching is manual, error paths are fragile, and both lists manage their state independently.
RTK Query Caching & Mutations
A single RTK Query slice dedupes requests, keeps data warm, and invalidates on mutation. Metrics show fewer HTTP calls while the UI stays consistent across components that share the cache.
Each panel owns its own network meter with a cache-hit counter. Try this sequence:
- Press “Reset metrics” on both sides.
- Type
alpha, thenbeta, thenalphaagain in each filter. - Watch how the naive totals climb twice as fast (two fetches per component) while the RTK version only issues a single request per filter and serves the second list from cache.
The mutation button shows how invalidation refreshes data exactly once, and subsequent views increment cache hits when the warm data is reused instantly.