Redux or React Query or Context API

Hi there,

Brad Traversy asked on twitter if anyone still uses redux for their react project in 2021… This question gained a lot of engagement and reactions. Some percentage of folks said they still use redux, some said react query is better and others argued that context API is sufficient for them.

To the issue:

As someone who is still a beginner/amateur in the react world and hoping to go deeper learning the library in the future,

Should I still consider learning redux or there’s no need to?

I need y’all input, thanks

Generally speaking, while they all relate to state management, they serve very different purposes.

  • context API: a transport mechanism, allowing data to be passed across components within a shared tree without using passed props;

  • Context API with useState/useReducer: a bit closer to Redux, this combines transport with simple state management.

  • Redux: a complete state management solution, handling complex state triggers and more complex data. Additionally, the way re-renders are handled is more robust.

  • React Query: a state management tool that moves state from the client to the server/backend. Useful for one app triggering state changes on multiple devices.

2 Likes

I think this is to large extent a Coke vs Pepsi thing - different people will have different tastes.

I have not used react query. I have used a lot of Redux (with thunks and sagas) and some Context API. Personally, I prefer Redux. This is especially true on large projects with complex data. I find Context to not handle that as well, but I’m sure someone has some library that makes it easier.

My advice would be to learn basics of both Redux and Context API. Having experience in both is good. You can do a deeper dive in whichever you like. That includes React Query.

1 Like

Redux is a state container. React Query is a data fetching library. The Context API is effectively a dependency injection mechanism. Context is part of React and is very widely used (for example to power React Redux and React Query), and you need to learn how and when to use it and when not to use it.

The other two are useful if they are useful. If you need a state container then Redux is widely used and works very well, if you need a data fetching library React Query is widely used and works very well.

Can i actually use Redux instead of context to share state across components?
Currently on the project im learning, i combine useState, useContex and useReducer to handle state; would Redux be capable of replacing them for the most part, if not completely?

1 Like

Great question! So you’re using useState and useReducer to maintain state, and then using useContext to transport that state between components. This is a very common pattern, and there is absolutely nothing wrong with it.

However, as your state becomes more complex, it can become ungainly. Redux implements the same behavior in a somewhat different way: you create a data store with Redux, and your components subscribe to that store. State changes are passed in as reducer objects, and all subscribers are notified of relevant changes.

It might be well worth your time to tinker with Redux. It’s easier than you might think, and for its purpose, it is wildly powerful.

If I’m dealing with a small app or simple state, i like the useContext and useReducer, it’s quick and simple. Anything that might grow at all? I reach for Redux.

1 Like

i actually dont have problem with Redux syntax, im sure with some practice i can adopt and use it well. Initially i actually confused useReducer for Redux, as they have very similar syntax(i made association from Redux lessons from FCC curriculum). I did not expect my project to go so vast. I started building it step by step and as i added more functionalities, i had to find different techniques to handle them. I had to give different components access to common state…i discovered useContext. I had to manage more complex state for some components…i got familiar with useReducer, and somehow along the way, it seems i established the proper formula to manage the state as a whole, but still i encounter more, problematic situations, where context or react reducer fall short and to discover Redux as another solution is nice, ill definitely have it try for my next project.
The main issue im currently battling is the way i use context occasionally leads to unnecessary components rerender and commonly solutions involve even more useSomeTool hooks, like useMemo, useCallback…React.memo… and things get overcomplicated. Ive learned of the technique to split the context into state consumers and those that change the state(yet to polish it) and now i wonder if Redux is actually capable to handle such situations and save the effort of using so many sorts of hooks.

1 Like