Can React Hooks useReducer and useContext replace Redux?
Updated: Jul 20, 2020
As soon as React hooks were introduced, the buzz around useReducer and useContext hooks replacing Redux gained traction. However, within the React developer community, there are conflicting opinions regarding the ability of hooks to fully replace Redux. Let us explore this further in this blog.
Before delving into the topic, let us first see What is Redux?. It is a state management platform that separates the application state and maintains the entire state in the form of a single store object. The state can be passed as props from the store object to any React component within the application. This is achieved using the connect API of Redux.
In this blog, let us see two examples. The first example is a class component that uses Redux and the second example is a functional component that uses hooks (useReducer & useContext) to maintain a data store. In both examples let us ignore actions file and side effects like API calls and focus on how the datastore is connected to the React component.
A React component that uses the Redux store will use the connectAPI of Redux, which is a Higher-order component. This adds a significant number of wrapper components in the React Virtual DOM.
The connect API uses two functions mapStateToProps and mapDispatchToProps to map state and actions to the component props respectively.
One of the biggest advantages of Redux is Time Travel Debugging. React dev tools allow developers to debug the state by maintaining a copy of the state on every update.
A Simple React class component which uses Redux
Next, let us explore React Hooks. React hooks are new React API’s which allow using React state and lifecycle methods from within functional components, thereby eliminating the need for messy class components. Hooks also allows the creation of custom hooks which allows reusing of logic in multiple components.
First, let us write a simple reducer and create a context.
reducer.js
Now let us import the reducer and context in a functional component and attach them to the component using useReducer hook.
App.js
Here, we have used the component App as a wrapper component for our functional component Home. In this component, we use the useReducer hook to map the data store with the application and we use the Context imported from reducer.js file to create a wrapper around the functional component Home.
Home.js
In the functional component Home, we use the useContext hook to attach the data store and dispatch function to the component. This achieves the core functionality of Redux.
Now the question arises Can this replace Redux completely? The answer is NO. Even though the combination of useReducer and useContext hooks solves the core problem Redux is made for, it does not come with the extra features packed in Redux like Higher Order Components with a configuration provider, a common layout provider, authentication, etc.
The hooks are perfect for small applications where the only requirement is a data store. But for big applications, Redux is still the best choice. However, the beauty of React hooks is that it is not imperative to eliminate Redux to use hooks. Hooks can also be used along with Redux.
After the introduction of React hooks, most third-party React libraries rewrote the respective libraries using React hooks. So it might not be surprising if Redux is ultimately rewritten using React hooks. However, it will be interesting to see how the features which use Higher-Order Components are written using React Hooks.