Beyond Redux's Limits: Managing Server State with SWR and React Query

This article highlights the hassle and verbosity of using redux-thunk or redux-saga to manage Server State in existing Redux setups, as well as the failure to separate concerns between Global State and Server State. To address these issues, it introduces SWR and React Query, which enable declarative programming, and compares their usage.

Core Feature Comparison

1. Basic Usage: SWR uses the useSWR hook, while React Query uses the useQuery hook; both accept a key and a fetcher function as arguments. React Query differs in how it handles the order of objects and arrays within the key array.
2. Conditional Fetching: SWR stops fetching when the key is null or returns a falsy value, whereas React Query controls this via the enabled option.
3. Data Refetching: SWR uses the mutate function, and React Query uses the invalidateQueries function to mark data for a specific key as invalid and trigger a refetch.
4. Direct Data Updates: When updating data without refetching, SWR passes the data to mutate, while React Query uses setQueryData.
5. Refetch Options: Both libraries support common options such as refetch intervals and refetch-on-focus. React Query additionally provides fine-grained query invalidation using predicates and Devtools.