You may not need Redux

in  technology  ,

Erasing complexity

If you were starting a new React project a few years ago, that almost always meant that you’d include Redux. React and Redux were thought to be one indivisible entity. When I was learning React myself I did that with the help of Stephen Grider’s excellent course Modern React with Redux. That course is a true bestseller. Nearly 200,000 students watched it since it was released. Stephen keeps it updated so that it includes the latest React features. You got it - that bestselling course on React has “Redux” in its title.

The year is now 2020 as I am writing it from a social distancing safety of my home. Quite a lot has changed in React in those few years. We now have hooks, we mostly write functional components and we now have a new and improved context API.

The big question is: Do we still need Redux?

I personally didn’t use Redux in any of project I started over the last couple of year or so. I don’t expect to use it in future either. Here’s why.

Redux was revolutionary when it appeared in 2015. It brought two big ideas to React:

  • It combined action-based model of Flux with a concept of Reducer (It is in its name: “Red” “ux” = “Red”ucer + Fl“ux”). That Action - Reducer pattern instantly gained traction among React programmers.
  • It solved an application-wide state. Let’s say we had certain data that we wanted to make available throughout the app. Before Redux the only reliable way to do that was to pass that data through props to child components… and then to their child components, and so on. Redux changed that. It allowed pieces of data to transcend the entire component hierarchy of an application without passing that data through props from one component to another. It also provided a convenient way to access and manipulate that application state from anywhere in the application.

Redux used a context API under the hood, which at the time was intended for React internal use only and was cumbersome to use.

Fast forward to 2020. A lot has changed. We now have hooks and the stable public context API which is ready for the prime time. An action - reducer pattern is now readily available via useReducer hook. We don’t need Redux for that any more.

The modern React context API is simpler, more efficient than before and comes with hooks support. In most cases, wrapping your application state in a context is all you need to access it anywhere in your app.

So what about Redux?

My point of view that in a vast majority of cases you don’t need Redux any more. Contexts and hooks get the job done most of the time. If you still think that contexts are not very friendly you may have a look at unstated-next library which is just a thin wrapper on top of the context API. That whole library is just 200 bytes!

However, plugging Redux into your project may be warranted if:

In that case, make sure you know what you are doing. Redux magic comes with a price.

Redux is a complicated beast. It will bring a lot of complexity into your app. Some of that complexity is obvious while many other unobvious gotchas are hidden and waiting for you to trip on it. Think twice if you want to deal with that. Even then it is worth checking out alternatives such as MobX or react-sweet-state.