React State Management: Redux vs Context API
Posted By : Shubham Singh Rawat | 29-Apr-2021
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
- Context API which is the component structure provided by reacting itself to share data across all level of components
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.
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
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.
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.
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.