Replacing Redux with Context and Hooks

When React Context got its new and official API, I was very skeptical about Redux dying; Now, with React Hooks, I am starting to have a secondthought.

I decided to create an application using React Hooks and React Context to build an architecture similar to Redux, and assert how similar they could get to be, as well as how suitable the new tools are for thejob.

TL:DR;

React Hooks areconvenient

Yes, They looked very weird to me at first, and to be honest, it is still the feature I am the least excited about after the ReactConf.

However, once you start using them, you become productive very quickly, and I found that I stopped worrying about what does React needs to properly work (in terms of lifecycles); to just declaring my logic and let React make its magic.

Plus, React Hooks do not introduce breaking changes, nor new concepts, and luckily, no more nested components to share logic and states as HoCs or Render Propsneeded.

React.useReducer

As part of the React Hooks RFC, the React.useReduce brings us the possibility to declare changes in the state as the result of a function that receives an action describing thechange:

(state, action) => newState

If you are familiar with Flux-like patterns like Redux, you already knowthis.

Now with this Hook as part of the React library, you might not need to use other libraries for state management as the React team will support this way of declaring changes to the state of theapplication.

How is React.Context importanthere?

React.useReducer will provide us a way to declare changes and mutate our state, as we do with Redux, however, we still need a way to easily connect our deepest children with our states, without falling in propdrilling.

Context API is a built-in way to expose data through components without passing propsdown.

Therefore, what if we wrap our main component to handle the application’s state with React.useReducer and we pass down the state using React.Context?

What’s cool aboutit?

No more HoCs nor nested logic to connect to the store, not even the need to fiddle around with React’slifecycles

We can fire actions that mutate the store from childreneasily

Small and plainComponents

Conclusions

Even though this architecture may result handy, it will be limited to React-only applications. Redux can be used with any otherlibrary.

Same concepts can be implemented. I used concepts like selectors and actions creators. You can go further and wrap the dispatch function in order to accept Promises and other functions, same as ReduxMiddleware.

Your code is less bloated. Using Hooks instead of HoCs and Render Props does really help you to keep your componentsplain.

You lose Redux DevTools. That tool is great for debugging, and if Hooks make its way into React 17, it’ll be a matter of time for that kind of tools to be integrated with React.useReducer.

In the meantime, if you have the React extension installed, inspecting a React.useReducer powered Component, you get very useful information and details to debug your actions and app’s state. It is like a tiny packed-up ReduxDevtool.

About Hooks. Although I disliked the idea of introducing magic to React’s API at first, once I tried them I started to enjoy using React without worrying about lifecycles.Even though, I strongly suggest newcomers to deeply learn about React’s lifecycles, as at the end, the right use of a Hook, highly depends on your understanding of React.For instance, take a look to the React.useEffectsecond parameter. You can easily miss it being new to React and end up with a lot of unnecessary re-renders andeffects.