Redux vs. React Context: Which should you use?

Redux has been the go-to solution for state management since its conception in 2015. “You should you use Redux” became such a universal truth, that so many started using it without really understand why. And there are situations where Redux isn’t the best option. Some started to look alternatives, including adopting other state management libraries or creating their own.

Before we talk about React, you need to know two more things.

What is state management and why you need it?

Front-end state management is a kind of logic that stores and refreshes current data, such as the information about the options button being highlighted, about the authorization of the user. etc. Or, if we were to put it in a more abstract way, it makes sure that business transactions are completed — by storing input data of the user interface and synchronizing it across the pages, back-end, and front-end parts.

It’s also helpful in drawing a line between the business and view layers. This makes the app run faster without having to load the same elements all over again — they’re simply stored in Redux.

What is Flux architecture?

Is Redux still relevant? And what is it anyway?

From the architecture point of view, Redux helps maintain order in the folders and files of the project. It helps programmers understand the application’s structure and introduce new people to the project (providing that they have previous knowledge of Redux). Its components are: global JS object, reduction functions, actions and subscriptions.

The pros of using Redux

  • There’s a good React Redux package for integrating React.
  • Good debugging, allowing you to log states and actions.
  • Nice code structure - Redux apps usually have similar architecture, so experienced programmers can easily switch to another project.
  • It’s designed for use with frequently updated data.
  • Reux eliminates unnecessary re-renders and the view refreshes when changing a specific object in the store.
  • Redux has access to middleware for async actions, but only when we use, for example, redux-thunk or redux-saga and expand the store with this functionality.

The cons

  • Even if used with Redux toolkit, it can be confusing for beginners due to its hidden logic.
  • It requires more configuration than Context API, and there’s more terminology to learn.
  • Problem with large boilerplate (this can be solved by using Redux-toolkit).

What is Context API of React?

Integration of Redux with React-Redux

The pros of using Context API

  • Great for static data as it doesn’t update frequently like Redux.
  • Low entry barrier due to minimal configuration. Just create a context (sometimes also a package component).
  • Good documentation for the React segment.
  • The app can include multiple local contexts for separate logic tasks.

The cons

  • The maintenance of complex apps can be difficult, especially if we use non-standard solutions.
  • Improperly passed data / parameters to components can make it difficult or impossible to reuse them outside of React-Context.

Lookout, it’s a trap!

Here are some examples of uses in specific cases

2. In trans.info, our other case, we used only Redux. This project involved large quantities of data, articles, commentaries, likes, dislikes, and user data. Managing the state of such a complex app is a job for Redux.
It’s a database and a powerful maintenance tool for the front.

Will React’s Context API replace Redux?

If you use Redux only to avoid transferring props, Context can replace it. But if that’s the case, you didn’t need Redux in the first place. There’s nothing like Redux DevTools in Context, there’s no state update tracking, middleware for adding centralized logic or other powerful capabilities of Redux.

Context is just a mechanism for sharing values to a nested subtree of components, and not an approach to state management itself. What this means is that you have to write any state management logic you need to define the value that is transferred to the context provider. Usually it happens through the React component state, but the point is that Context itself won’t manage the state for you.

Should I choose Context or Redux?

Context is quickly implemented and offers a lower entry barrier. It’s easy to expand it, but hard to switch from Context to Redux. Context is built into React, you don’t have to install it or get any additional dependencies. You get a smaller package and better project maintenance. The API interface is also relatively simple to use, once you get a hold of it. You don’t need packages like Redux-Thunk for async actions.

Redux is just a library that can be used in JavaScript, but to be able to use it, e.g. in React, you need to integrate with React-Redux, thanks to which we will have the so-called Provider (it is also in Context-API) which will wrap the entire application and give us additional functionalities (HOC connect or useSelector hook) thanks to which we will be able to extract data from the store anywhere. It will ensure that the component only re-renders when a specific object in the store changes. Context API does not provide this and that is its biggest downside (this problem can be solved in short by using several providers, using memoization. Both involve the use of boilerplate code — but we could create a separate article about solving this issue).

So what should you choose? Context or Redux? First, estimate the size of your project or app. You don’t want to find out later that it increases in size and you have to rewrite it from Context to Redux. You need to know which data needs refreshing and how often. You need to know what your project actually is. If we work on a larger, complex endeavor, we choose Redux for global state management. If the project is smaller — Context is the way.

If you want to take your programming skills to the next level, be sure to check out “Zero to Full Stack Hero” here.

Share this article with anybody you think would benefit from this. If you have any suggestions, feel free to hit me up. I hope you enjoyed this article. If you did, make sure to let me know in the comments down below and don’t hesitate to buy me a coffee by clicking below👇!

https://www.buymeacoffee.com/papareact
https://www.buymeacoffee.com/papareact

Thank You!

Darshan mandade
(PAPA Team Writer)

Python Fullstack Developer | Blogger | Web Developer | Mentor. Let's Connect on IG: @Darshu.codes