Redux vs Context API and useReducer hook

Question

I have been working in React for past 6 months and do not have any experience with Redux yet. Though I have worked with context api and useReducer hook. I need to convert an existing application to react which will have around 100-120 components. My question is about the choice of state management. With the rise of context api and useReducer hook, Can I rely on these two only Or Redux library is still a better choice ? Articles that I found for comparison are from late 2019 so I couldn't decide. Please guide

Answer 1

Redux is still a much better choice for large scale. Let's assume you have 10000 global state variables in the global store. And you need to change one.

1. Context API

It will rerender all of its consumer components which is unnecessary.

2. Redux

It allows us to selectively rerender components that subscribed to changed values.

So Context API is good for small scale but not good for large scale. Fundamentals are still same for context API before and after useReducer.

Answer 2

I think useReducer and contextAPI should be good enough even for large applications if you don't want the time travel that Redux provides out of box, as a by-product of its design.

For large applications, one could have a large state (or multiple reducers combined via combiner) in Redux, and yet avoid re-rendering of components. This is because components are rendered based on parts of state that it depends upon, using the mapStateToProps and mapDispatchToProps magic. With contextAPI and useReducer one designs global state by breaking it up into Providers such that only the sub-tree affected by a particular sub-part of global state is passed that part of global state via its own provider.

Check this out: https://kentcdodds.com/blog/application-state-management-with-react