A lighter alternative to Redux: React Query

https://react-query.tanstack.com/

What is React Query

Often referred to as React’s missing data-fetching library, React Query handles fetching, caching, synchronizing and updating server state in a relatively simple manner with just a few lines of code.

Server State vs. Client State

State management libraries work well with client state, however they lack efficiency and expose problems when dealing with async / server state. React Query’s docs explore the quality and characteristics of server state:

How can it replace Redux?

Instead of using Redux to store data you get and modify from the server (i.e. fetch requests), React Query replaces the boilerplate code with just a few lines of React Query logic.

Queries

  • used forGET and POST methods, to retrieve data
  • React Query provides the useQuery hook that takes a unique key and a function that returns a promise
  • after storing data in cache with useQuery, you can access that data at any point with useQuery, which takes the unique key as an argument: const data = useQuery(‘unique key’)

Mutations

  • used for PATCH/PUT and DELETE methods, to modify data
  • React Query provides the useMutation hook

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sara Bastian

Sara Bastian

full-stack developer exploring how software can solve real-world problems | https://sarabastian.com/