React Context API Vs Redux

Pre-Requirements

Since the launch of Redux in 2015, it has been preferred solution for state management. Because of that by the time “you should learn Redux” has became universal truth. Many people start to use Redux without knowing why actually we need Redux. Because there are situations, Redux is not the best option we have.

Before start using Redux, it is important to understand how to use it. Especially because there is another solution, which is a supplementary solution Reacts Context API!

Before we start talking about React, we need to have an understanding about two more things.

  1. what is state management means?
  2. why we need it?

what is state management means?

why we need it?

how passing props happens

To solve this issue, we need a global state that helps us to easily access the data, even though our component structure is deeply nested.

passing props from higher component to NoteItem component
accessing passed props from child component

What is Redux?

however, as a disadvantage of prop passing, we must write considerable number of extra codes. But with the Redux this problem become more severe because Redux requires mainly three building parts to function, they are actions, reducers, and store. So, these all the additional code blocks it requires for setting up a global state introduced us even more complexity.

Here is a simple example of how we are using redux in a notes app.

App.js:

Here we use manually initiated notes list. And the provider received the configured store.

app.js

Reducer.js:

These are pure functions that implement the action behavior. They take the current state of the application, perform an action, and then return a new state.

reducer.js

Action.js:

These are objects that are used to send data to the Redux store.

action.js

NotesList.js:

This is the component connected with Redux.

notesList.js

NoteItem.js:

noteItem.js

mapStateToProps — this determines which data is injected into the notes display component.

mapDispatchToProps — determines which actions are injected into the component and which can manipulate the data from this state.

What is the React Context API?

Here’s how Context API explained in react documentation.

“Context provides a way to pass data through the component tree without having to pass props down manually at every level.”

Here we are using React Hooks, bases for functions that simplify data positioning within components. The component blocks we need are Context Object, Context Provider, and Context Consumer.

Before we dive into Context API implementation. We need a basic understanding about how React Hooks works.

What are React Hooks?

state handling without React Hooks in class components
state with React Hooks in functional components

Let’s create a React Context! And try to get a basic idea about how to implement it. Then we can change the previous notes app state management using context API.

To create a context, we need to use createContext method of the React. By default it accepts a parameter.

create a new context using createContext method

The createContext method will return two objects which are consumer and provider.

context provider and consumer

The provider component which we get from the createContext method is the one which make state available to all the other child components. This component receives a prop called value which we pass our current value.

set the context provider

The next one, consumer component is the used consume the state or the data in the state. That help to use the global data without passing props.

wrap using context consumer to access context state

Here there are two main scenarios according to component type,

  1. If we need to access the global state data in a class component, then we do it as below.
initialize the context type needs to access
access the context values from a class component

2. If the desired component we need to access the global data is a functional component, we needed to wrap our content in a consumer component and then pass a function as a child just so we could access and consume the state.

Anyway this introduces unnecessary component nesting to our code.

But with React Hooks , in functional components, we can the access context using the useContext hook.

access the context using useContext hook

The useReducer Hook

useReducer hook implementation

When we call the dispatch method, the useReducer hook will perform an action based on the type that our method receives in its action argument.

access the reducer methods using dispatch

Here is how the context API used in notes app we did previously.

Provider.js:

This is how context implement using createContext method in react. And add the value prop to the provider component.

provider.js

App.js:

To access the created context from the app we need to wrap the app component using provider component.

app.js

NotesList.js:

To access the global state from the notes.js here we used the useContext React Hook.

notesList.js

NoteItem.js:

noteItem.js

Now let’s see how to use useReducer hook with Context API in notes app!

provider.js

This is how we can access the state globally.

notesList.js

Implementation of the other components will be same as the previous.

Will React Context API replace Redux?

Should I use Context API or Redux?

On the otherhand when thinking about Redux it is designed to use with frequently changing data and easy to test the code base. Redux has access to middleware for async actions when we use redux-thunk or redux-saga and expand the store with this functionality. It helps to maintain good code structure as well. Unnecessary re renders and the refreshes are eliminated by Redux when changing the store object. But there are several drawbacks in Redux as well. Since It is not built-in React, which increases size of the package in considerable amount. We need to externally install Redux library. Even if used with Redux Toolkit, it can be confusing for beginners. And obviously It requires more configuration than Context API, and the learning curve is considerably high.

So, what should you choose? Context API or Redux?

Get the source code for the three apps from here.

  1. app with Redux
  2. app with Context API
  3. app with userReducer Hook & Context API

what she tackles, she conquers!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store