State Management: React’s Context API vs Redux!

Modern front-end frameworks like React, Vue, and Angular has changed the way our web looks like today. A maximum of them are using a component-based approach. But communication among the components is an important part. The way components communicate and share state with each other, defines their success story. To create maintainable software by separating different parts of logic and state into dedicated components is a bit tricky.

Passing data to deeply nested child components can be cumbersome, especially when dealing with child components several levels down a component tree. Without React Context or Redux, we resort to a technique called “prop drilling” where we pass data down components even though some of those components don’t need that specific data.

Using React Context

Context in React allows you to pass data to any component without “prop drilling”. Also, it is possible to update the context data from any subscribed component.

We will use a simple example that will help us to understand the main concept of Context.

First of all, we will create a context for user data.

So create a file UserContext.js in the root of /src folder

Here, data are passed via the value props to any subscriber of the provider.

Then wrap the App component with UserContext in the index.js file

Wow, we are almost done. Now the Context is ready to be used. To use these context data need to import useContext hook in the components. So here are our components look like.

So finally we have used context data & update as well. Its really simple, right?

You will find full source code here.

Using Redux

It’s a predictable state container for JavaScript apps. The whole state of your app is stored in an object tree inside a single store. The only way to change the state tree is to emit an action, an object describing what happened. To specify how the actions transform the state tree, you have to write pure reducers.

We will try to show some simple actions and reducers, required to manage the state using redux. So we will keep & update some user data in the redux state.

First we have to install few packages

npm install redux

npm install react-redux

npm install redux-persist

Now we need to create some redux related files & keep it in a separate folder, we are naming it redux. Inside this folder we will create below files.

In /redux/reducers/ create a reducer for adding user data

Combine all reducer, though we have only one reducer, but we are following a convention to adapt more reducers later.

Now we have to connect Redux with React. First, we need to make the store available to our app. To do this, we wrap our app with the <Provider />API provided by React-Redux.

React-Redux provides a connect function for you to read values from the Redux store.

The connect function takes two arguments, both optional:

• mapStateToProps: called every time the store state changes. It receives the entire store state and should return an object of data this component needs.
• mapDispatchToProps: This parameter can either be a function, or an object.

So we are going to use connect in our App component

You will find full source code here.

Who wins?

It is really a tough question. At a high level, we can say, Redux is far from dead or be killed by React Context & still it is one of the greatest solutions towards props drilling even it requires a bunch of libraries.

You already get basic knowledge of Redux and React Context. React Context with hooks is much easier to implement & since it’s built into React and you therefore need no extra third-party dependencies, so total bundle size won’t increase.

So what should we use for our state management?

For simple or low-frequency updates like theme settings, user authentication data, React Context is the perfect choice. On the other hand for complex or high-frequency update Redux should be used, React Context won’t be a good solution. React Context will trigger a re-render on each update, and optimizing it manually can be really tough.

Finishing with the comment of Sebastian Markbåge (Facebook React Team)

My personal summary is that new context is ready to be used for low frequency unlikely updates (like locale/theme). It’s also good to use it in the same way as old context was used. I.e. for static values and then propagate updates through subscriptions. It’s not ready to be used as a replacement for all Flux-like state propagation. — sebmarkbage