React Context API vs Redux - Which one to use

-
At some point while learning React most of the people think whether React Context API is a replacement for Redux, we are often confused that when should we go for Context API and when should we go for Redux. Moreover what could be the pros and cons if we select each.


So in this article we are going to compare React Context API and Redux also we will try to see when each are useful.

What is Redux 

According to definition, Redux is a predictable state container for Javascript applications. Redux helps us manage the state of the application.

From react perspective React offers no solution which allows us to have a global state, so that we can share states among components. Redux solves this problem and it's a good fit for react.

What is Context

React Context API on the other hand , is a component structure provided by React framework which allows us to share specific forms of data across its children.

When Redux can be replaced by React Context API 

If we are only using redux just to avoid passing down props then it can be replaced by context api 

The Difference

In the react architecture if a react application is configured with Redux then there can be only one store. There are exceptional situations where multiple store can be considered. So if you look at the react component tree then redux has to seat on the top of that tree.

React Context API on the other hand , we can have multiple contexts across the application. It solves the problem of "Prop Drilling", whatever we have in the context something is updated that changed is passed to its children nodes via context an for achieving that we don't have to pass all the props unnecessarily.

Fact Check

React redux uses context api internally it's just that they don't expose it in public api

When to use Redux  

If we are working in an application which requires very frequent updates , like multiple updates per second then redux will be a better solution.

Pros of using Redux

  • Redux is much powerful
  • As it is mentioned above redux internally uses context api, so it's much safer to use context api via react-redux than directly because if it changes the burden of updating code will be on react-redux not you
  • Context does not provide any features like Redux Devtools , which helps us to see state updates directly
  • We can have middleware to add centralised logic

Cons of using Redux 


  • You need to install extra dependencies like redux, react-redux and a middleware (thunk , saga etc) 
  • Installing extra dependencies increases bundle size
  • Initial setup takes little time, though very easy to use after these setup

When to use Context API 

When we are dealing with less frequent changes those data should be put in Context API , lets say if we are selecting theme for a website we can keep that data in context api, more over context api comes with react package we don't need to install any extra packages for that and its really easy to setup context api

Pros of using Context API

  • No prop drilling
  • No extra libraries needs to be installed
  • Less bundle size
  • Easy and quick setup

Cons of using Context API

  • Not a good solution for frequent update till date
  • No dev tools

Conclusion 

For most of the existing complex applications it's far too early to say that redux can be replaced with React Context API

Comments

Post a Comment

Popular posts from this blog

Best coding practice and structure for redux saga with react hooks | Separate watcher and worker saga | React clean code

-
Image
Hello everyone, in this article we are going to learn about proper use of redux saga, some effects of redux saga like put, call, take, takeEvery etc. Along with that we are going to separate saga files into watcher and worker for improving code readability. Let's create a simple react application with will render list of data on click of a button. Whenever user clicks on the button an endpoint is called and data is fetched from a remote server. We will use a sample endpoint provided by  reqres.in Finished application looks like below screenshot : Folder structure for this application will look like below: components : will have all the components we will use for the app components -> style : will have separate folder and file to hold the styling REDUX setup : constants  -> index : will hold all action types and constant values actions  -> index : will hold all the actions reducers -> index : is the root reducer reducers -> ot...
Read more

How to use redux with React Hooks - Creating TodoList

-
Image
Hello everyone in this article we are going to take a look at how we can use redux with React Hooks. # What are React Hooks React Hooks are functions that let us hook into React State and lifecycle features from functional components. Using redux with react hooks conceptually is same as we use it in class components but syntax wise they are bit different To learn about this today we are going to create a simple ToDo List Application, here is a quick look Use create-react-app to initialise a react app and install dependencies  redux, react-redux You will have basic react app folder structure by now. So let's create the redux store import { createStore } from 'redux' ; const INITIAL_STATE = { data : [ 'Get up early' , 'Have Breakfast' , 'Start coding' ], }; function tasks(state = INITIAL_STATE, action) { switch (action.type) { case 'ADD_TASK' : return { ...state, dat...
Read more

Setting up Redux Devtools for React applications

-
Image
Hello everyone, in this article we are going to look at how can we set up redux devtools for react applications which are using redux. As a reference we will take our previous tutorial's redux setup. Visit : Best coding practice and structure for redux saga with react hooks | Separate watcher and worker saga | React clean code How to install Redux Devtools? To install Redux Dev, if you are using Google Chrome, go to chrome web store or  https://chrome.google.com/webstore/category/extensions Search redux devtools Select below extension Install the extension After successful installation an icon for the same should be added beside chrome url bar. Now whenever you run a react application which is using redux the icon will glow. Refer below mark on the screenshot: Now let's focus on code As mentioned in the above tutorial , Store file for redux setup looks like below : import { createStore,applyMiddleware } from 'redux' import root...
Read more