React State Management: Redux vs Context API

Posted By : Shubham Singh Rawat | 29-Apr-2021

react state management

React State Management using Redux and Context API

React is a library used for building composable user interfaces and encourages the creation of reusable UI components, which represent data that changes over time. React abstracts away the DOM from us by providing a virtual DOM and hence offer a simpler programming model and better performance. React implements one-way reactive data flow in which data flow in uni-direction from parents to child components, which reduces the boilerplate and is easier to reason about than traditional data binding.

In typical React, data is shared among disconnected components using prop drilling. Since there is no global state that components can access if, for instance, we want to pass data from a top-level component to a most bottom-level component, we’ll have to pass the data as a prop on each level of the tree until you get to your desired component. This results in writing a lot of extra boilerplate code and giving components redundant properties that they will never use and it also affects their architectural design.

As per the above discussion, we required a way to maintain a global state of the whole application which is accessible to all components irrespective of their nesting level. This can be achieved using two ways

  • Redux is a third party javascript library to manage centralized state management
  • Context API which is the component structure provided by reacting itself to share data across all level of components


Redux

Redux is a predictable state container used for JavaScript applications. As the application grows out to be more bigger and complex, it becomes difficult to keep it organized and maintain data flow. Redux solves this problem by managing the application’s state with a single global object which is called Store or centralized state. Redux fundamental principles help in maintaining consistency throughout our application, which also makes debugging and testing easier.

 As to make redux work, three building blocks are required: actions, reducers, and store.

Actions: These are objects that are used to send data to the Redux store. They mainly have two properties: a payload property that has the data that should be changed in the app state and a type property for describing what the action does.

Reducers: These are basically pure functions that are used for implementing the action behavior. They perform an action, take the current application state, and then return a new state.

Store: The store is where the application’s state is housed. There is only one store in any Redux application.


Context API

The Context API is a component structure provided by the React framework, which enables us to share specific forms of data across all levels of the application. It’s aimed at solving the problem of prop drilling.

React’s Context API offers a nearly comparable route of passing data through. It generally comprises of three building blocks:

  • Context Object
  • Context Provider
  • Context Consumer

Context Object

We can define the Context object right next to a component in a component file or in a separate file or. We can also have multiple Context objects in one and the same app. Actually, in the end, it’s just some data - e.g. a JavaScript object which is shared across component boundaries. We can store any data we want in Context.

Context Provider

With the Context created, we can now provide it to all components that should be able to interact with it for example reading data from it or triggering a method stored in Context

Context should be furnished in a component that entails all child components which ultimately require access to the Context. For data that should be available in our entire app, we have to provide Context in our root component therefore if we only need Context in a part of our app, we can provide it on a component a little further down the component tree.

Context Consumer

It is a wrapper component used to provide data from a parent component (need not to be an immediate parent) on any child component in the react component tree. Actually, it is achieved either using wrapper components or using react hooks.


Conclusion 

For Implementation: Context API is easy to be used as it has a short learning curve. It needs less code and because there is no such requirement for extra libraries, bundle sizes are significantly reduced. On the other hand, Redux requires inculcating more libraries to the application bundle. The syntax is extensive and complex that creates unnecessary work and complicacy. However, it is yet the best alternative for prop drilling. 

For Rendering: Context API prompts a re-render on each update of the state and re-renders all components regardless. Redux, however, only re-renders the updated components. This can be monitored on the console as there's a log in each component.

About Author

Author Image
Shubham Singh Rawat

He is a technical enthusiast who has keen interest in full-stack web development. He has good experience using java(springboot) in back-end and reactjs in front-end.

Request for Proposal

Name is required

Comment is required

Sending message..