Comparison between Tanstack Query and RTK Query

comparison.md

Tanstack Query vs RTK Query

• Full comparisons
  • from Tanstack Query Website
  • from RTK Toolkit website
• Differences only
  • from Tanstack Query Website
  • from RTK Toolkit website

Full comparisons

from Tanstack Query Website

	React Query	RTK-Query
Platform Requirements	React	Redux
Supported Query Syntax	Promise, REST, GraphQL	Promise, REST, GraphQL
Supported Frameworks	React	Any
Caching Strategy	Hierarchical Key -> Value	Unique Key -> Value
Cache Key Strategy	JSON	JSON
Cache Change Detection	Deep Compare Keys (Stable Serialization)	Key Referential Equality (===)
Data Change Detection	Deep Comparison + Structural Sharing	Key Referential Equality (===)
Data Memoization	Full Structural Sharing	Identity (===)
Bundle Size	[![][bp-react-query]][bpl-react-query]	[![][bp-rtk-query]][bpl-rtk-query]
API Definition Location	Component, External Config	External Config
Queries	✅	✅
Cache Persistence	✅	✅
Devtools	✅	✅
Polling/Intervals	✅	✅
Parallel Queries	✅	✅
Dependent Queries	✅	✅
Paginated Queries	✅	✅
Infinite Queries	✅	🛑
Bi-directional Infinite Queries	✅	🛑
Infinite Query Refetching	✅	🛑
Lagged Query Data1	✅	✅
Selectors	✅	✅
Initial Data	✅	✅
Scroll Recovery	✅	✅
Cache Manipulation	✅	✅
Outdated Query Dismissal	✅	✅
Render Batching & Optimization2	✅	✅
Auto Garbage Collection	✅	✅
Mutation Hooks	✅	✅
Offline Mutation Support	✅	🛑
Prefetching APIs	✅	✅
Query Cancellation	✅	🛑
Partial Query Matching3	✅	✅
Stale While Revalidate	✅	✅
Stale Time Configuration	✅	✅
Pre-usage Query/Mutation Configuration4	✅	✅
Window Focus Refetching	✅	✅
Network Status Refetching	✅	✅
General Cache Dehydration/Rehydration	✅	✅
Offline Caching	✅	🔶
React Suspense	✅	🛑
Abstracted/Agnostic Core	✅	✅
Automatic Refetch after Mutation5	🔶	✅
Normalized Caching6	🛑	🛑

from RTK Toolkit website

Feature	react-query	rtk-query
Supported Protocols	any, none included	any, REST included
API Definition	on use, declarative	declarative
Cache by	user-defined query-key	endpoint + serialized arguments
Invalidation Strategy + Refetching	manual by cache key	declarative, by type and/or type/id
**Polling **	✅	✅
**Parallel queries **	✅	✅
Dependent queries	✅	✅
Skip queries	✅	✅
Lagged queries	✅	✅
Auto garbage collection	✅	✅
Normalized caching	🛑	🛑
Infinite scrolling	✅	TODO
Prefetching	✅	✅
Retrying	✅	✅
Optimistic updates	can update cache by hand	can update cache by hand
Manual cache manipulation	✅	✅
Platforms	hooks for React	hooks for React, everywhere Redux works

Differences only

from Tanstack Query Website

	React Query	RTK-Query
Platform Requirements	React	Redux
Caching Strategy	Hierarchical Key -> Value	Unique Key -> Value
Cache Change Detection	Deep Compare Keys (Stable Serialization)	Key Referential Equality (===)
Data Change Detection	Deep Comparison + Structural Sharing	Key Referential Equality (===)
Data Memoization	Full Structural Sharing	Identity (===)
Bundle Size	[![][bp-react-query]][bpl-react-query]	[![][bp-rtk-query]][bpl-rtk-query]
API Definition Location	Component, External Config	External Config
Infinite Queries	✅	🛑
Bi-directional Infinite Queries	✅	🛑
Infinite Query Refetching	✅	🛑
Offline Mutation Support	✅	🛑
Query Cancellation	✅	🛑
Offline Caching	✅	🔶
React Suspense	✅	🛑
Automatic Refetch after Mutation5	🔶	✅
Normalized Caching6	🛑	🛑

from RTK Toolkit website

Feature	react-query	rtk-query
Supported Protocols	any, none included	any, REST included
API Definition	on use, declarative	declarative
Cache by	user-defined query-key	endpoint + serialized arguments
Invalidation Strategy + Refetching	manual by cache key	declarative, by type and/or type/id
Normalized caching	🛑	🛑
Infinite scrolling	✅	TODO
Optimistic updates	can update cache by hand	can update cache by hand
Platforms	hooks for React	hooks for React, everywhere Redux works