Should I use Context API or Redux?

Hello there, I hope you are safe and healthy? So today I am going to share my personal experience with React State management.

React state management is one of the challenging tasks in react.

There is a two way to manage your state in React.

1. App level state.
2. Component level state.

So as long as our app is getting complex, It’s become quite hard to manage the state between servals components and so we need to identify the scope of the state.

Why do we need to manage states?

To avoid Prop Drilling

Prop Drilling is the worst situation in which you are passing props throughout the Components.

To avoid this situation we have two options. 1) Context API, 2) Redux

Use case of Redux

So we got Redux there. Redux makes centralized storage for your app. So now you can avoid prop dealing. You can access any state at any level of Component.

But wait a minute, Did you notice Something?

A lot of configurations, we need to do like making reducers, actions, dispatching actions. You will not have the performance experience You were having without redux. I am not saying Redux is anti-performance but at a certain point, you will experience that.

So we should avoid redux?

The Answer is Yes or No.
It highly depends on the scale of your application. If you building a small application in which you don’t have to deal with complex states and logic then I would suggest you go for Context API.

But What if I want my state to be persisted? (Offline Capabilities)

Redux has the library redux persists that allows you to save your state locally on the browser. Meanwhile, Context API doesn’t have offline support.

Still, you can make your app as PWA to avoid the use of Redux.

You have to think twice to create a state because the choice you are making right now can be impacted your app in the future.

Here my suggestion Hybrid Strategy

You should use both Redux and Context API in your application because every application that you are making is going to be scale.

But Keep in mind, Do not use redux everywhere in your App. Mostly Developers make this mistake.

You should ask yourself Does this state belongs to App level or Component level?

I hope this blog will be helpful to you. Let me know your thoughts in the comments and if you think something is missing here please share it with everyone.

Thank you,