Migrating from Redux to React Query

Redux is not so bad or is it. I have worked with an app that used the Redux Ducks pattern. What is that you may ask? Its a pattern that bundles together actionTypes, actions and reducers together in a module, instead of keeping them in separate files.

In late 2015 when this pattern was introduced, I am sure it was a good idea. But the problem is I have to write a lot of code for very little functionality. Most often I just want to fetch or post some data to a server somewhere. Most often its rather trivial stuff. But then I have to write all of my actionTypes, actions and reducers to do this simple thing.

Once we saw that there is lib that basically does all of the boring parts for you. It just made a lot of sense. Thats when we switched over to React Query.

React Query is a library that helps with fetching data, post data and cache data in your app. It provides a bunch of hooks that makes is easy to keep your data in a state when navigating between pages. It also makes it easy to refetch data, in case you want to keep it fresh.

Here you can look at a simple example.

Things I really love 😍:

• The hooks provides a consistent set of properties. In case you need a spinner to indicate something is loading, or some data is being refreshed. If you need to have empty states, either because of errors, or because of no data is available, this is super easy.
• In case you make a post request that updates data you already have on your page. You can invalidate already fetched data, this will trigger a refetch, which makes sure you have correct data on your page.
• Less code: Replacing a bunch of redux code with react queries, means we have less than half of the same code, for the same functionality. This is a huge win. It will make it way easier to maintain, and easier for other developers to grasp once they are on-boarded to the application.
• The documentation is very nice, its easy to read more about specific feature. And the doc provides plenty of examples.

Somethings to keep in mind 💭:

• React query doesn't replace a global state. You still need to keep your user authentication data somewhere, token, refetch tokens, username, email and so on. Since these will most likely be used in so many places of your application, these should be readily available throughout the app. Therefore I think you should either have them in a context, or a redux store somewhere.
• Migration tips. Start with migrating the most simple redux code. You might have a simple reducers, that only fetches data. Which doesn’t depend on other state. Start with the most simple chunks of redux, and migrate over to using React Query. You can do this over longer time periods, since both React Query and Redux works well together. It can take some time to migrate your app completely. But once finished, it’s well worth it.
• Do not try to migrate your whole app in one go. This will most likely not work, and you will feel overwhelmed. Instead do it step by step over a few months.

I think React Query brings a lot value to you. It can help you take care of fetching data, invalidating data once it gets out of date. It just does a bunch of super useful things for you behind the scene. This way, you can instead focus on creating a better user experience in your app. Its been a huge win to say goodbye to so much bloated redux code.