React: State Management

Hello there, This is darshan ponikar and today we are going to talk about one of the annoying decision that we ever have to make is "State Management"!

Now look, It's really important and if you are beginner you may haven't face this yet, but you will soon need to decide where should I put my state, either Redux, Context API or Maybe in component state.

Now in order to manage state, you probably heard about Redux state management library which has centralized state mechanism and Context API.

But which is a best way to manage state, Like should you use redux?

I have seen lots of beginners just started to learn redux and now they are using Redux everywhere.

You need to decide whether you should go for redux or context API?

But let's understand why State Management is really important?

State is one of the core part of React Application. You can consider as a heart of your application.

As we know that out application start to get scale,more and more components and more props we are passing through the those components.

Don't you think this pattern will start to became weird?

Let's take an example, Imagine we are building the application like Social media platform, we are fetching notifications from server at App level and Passing through the Home page.

App Component

const App = () => {
      // fetching some notifications APIs 
      useEffect(() => {
          axios...
      }, [])
         return <Home notifications={notifications} />
    }

Home Component

 const Home = ({ notifications }) => {
     return <Pagebase>
     <Notification notifications={notifications} />
     ....
    ....
    </Pagebase>
}

So here we are passing notifications props through App, Home and Notifications and this will became hard to manage. This situation is known as "Prop Drilling"

To avoid this situation we are having two options

1. Context API
2. Redux Store

But which one is best? Should you use Context API or Redux?

Redux is good library, but it also can be costly.

1. we need to configure redux store first.
2. Dispatching Actions.
3. Making reducers
4. Mapping all the props with Components.

I am not saying redux is anti performance but you need to decide should your application really need something like redux or you can use Context API?

To decide where should you put your state answer this following questions!

1. What is a scope of the state?
2. Should I need to persist the state? (offline support)
3. Can you uplift state and solve problem?

Redux Store

Redux is great option,
it can help you to avoid unnecessary network callback.
You can use redux-persist to enable offline support.
Since your application state is global you can use your state everywhere.

But

You need to configure your store, you need to make actions creators and mapping store with Components.

Everything comes at cost!

Can your problem be solved by Context API?

Context API

Context API is lightweight and it is effective way to pass props also it doesn't need any configuration you can create context and directly use it with useContext hooks.

So it's really important to make design your application the way so it can be scaled and we need to maintain the performance as well.

This decision will take some time. It's highly depends on your application and you should take care of it.

So that's it.

Thank you, Share your thoughts in comments. Let me know what do you like most and if you want to add up something, feel free to leave message!