React state management: react hooks vs Redux: what is the difference?

Many developers around the world including me got confused when they heard people were using react hooks instead of redux, I mean why would you replace something that works so fine on so many levels with something new and uncomplete.

Many people are wondering does useContext and useReducer replace Redux?

Today I am gonna try and answer this question, I will explain how the new React Hooks (userReducer, useContext) are different from Redux and how they can be used.

The biggest difference between the two is how they manage the global state of the application.

Redux is the go-to solution for most React developers when they need to work with a big and complex application that requires a global state, it serves as a centralized store for the state that needs to be used across the entire application, with rules ensuring that the state can only be updated in a predictable fashion.

React Hooks is the new way of handling state and life cycle into React components, without relying on component classes. It was introduced in the 16.8 version of the library and has the intention to decrease the complexity of the components, by sharing logic between them.

The main difference is that Redux creates one global state container which is above your whole application and is called a store and useReducer creates an independent component co-located state container within your component.

Another important React hook is the useContext witch is used together with userReducer to take the component co-located state management to another level. It enables the state container that is created with UseReducer and its dispatch function to be passed to any component from any top-level component. You can define it in the top-level component and make the state global.

If we would take all our useReducer state and place it in the top-level component it might make us feel like we don’t need Redux anymore.

So Context is what may or may not replace Redux, not React hooks.

Benefits of useContext & useReducer over Redux:

Not having to keep up with any updates to Redux Not using an external library will result in fewer bugs and problems Not using an external library makes your app smaller and therefore faster Having all your state handled by React will make your code easier to understand and work with React Hooks will make building components much faster with less code.

Even if it seems to you like useReducer is very similar to how Redux works it still isn’t Redux. The useReducer function is tightly coupled to its reducer which holds also true for its dispatch function. We dispatch action objects to that reducer only.

You can think of Redux as one global event bus which takes any events (actions) and processes them into a new state based on the action’s payload and the previous state.

Summary

Redux, and other state management solutions for React were created because managing your entire application state inside React components is generally a bad idea. Doing so will likely result in all sorts of problems, such as multiple sources of truth, and a model structure that is determined by the visual representation instead of by the organization of the data itself.

If Hooks do make component state management significantly easier then I assume that for simpler applications they will be able to replace Redux. But for more complex apps, state management libraries will still be required.