React Query, Context and Redux

Which one, why? The question thats been asked a million times. They are 3 different tools all with big advantages. Here are my thoughts on each and my experience with them.

React Query

A tool to help with queries and caching, seperate local state and remote state. A very nice too to help keep your application up to date with the serve without making tons of requests. Used for fetching data and provides out of box caching.

Use Case

React Query shines brightest when you simply want to fetch and display data from a remote location with minimal computing. I've had the best experience using it for REST api driven applications where you simply want to GET, PUT or POST data and display it in the UI.

Aere repetiti cognataque natus. Habebat vela solutis saepe munus nondum adhuc oscula nomina pignora corpus deserat.

Context API

Share data or state within a group of components, globally. Not an eligant solution for state managment but Context removes the need for prop drilling by creating global variables that can make data available to deeply nested components.

Use case

The use cases for Context API for me have been sharing data throughout the component tree. This could be data that is received from a server but manipulated on the front end, or it could simply be toggling a modal display from different levels throughout the tree. Context API is a great tool to use when prop drilling is getting pretty extensive.

Redux

Application level client side state. A store that provides data that your entire application may need and usually fairly complex.

Use case

I have limited experience with Redux, as I have used other "lighter" tools that have achieved my goals without too much additive. Redux is great when you need a store on the front end. If you are managing state from multiple APIs or want to create a single source of truth, Redux can help with that all while acheiving the above, too.

Final thoughts:

For the apps that I’ve built personally and have worked on professional, I have loved utilizing React Query and Context. React Query’s out of box caching makes accessing data easy and handles stale data effortlessly. I have experience with Redux to a certain extent and can understand how managing client side state would help helpful if you were needing to manipulate or compute it.

As a general rule of thumb, I don’t like to solve problems before we know it’s goin to be a problem. With react query and context being such simple and solutions for what I experience commonly, it’s hard for me to jump directly to redux. All three of these tools are great and have their own purpose, none are a replacement for the others.