Four ways you should know to handle State In React
What is State?
Before moving to the ways of handling state, let’s first discuss the existential question.
What is state? Why do we need state in react at all ?
A state is an object which is used to keep data of a component. This object holds some information that may or may not change over the lifetime of the component. For example, the toggling of the button requires to change its boolean value to true/false or there can be a variable name which can have a constant value.
Ways of handling a state
Below are some of the different ways to handle state in React:
- React state
- Mobx
- Flux
- Redux
- Other’s (Apollo, Reflux ,… etc)
Woah…!! Looking at the number of ways of handling state, one can easily get confused as to which one to use and when. Therefore, I am writing down the explanations for some of these techniques, when to use them and how are these different from one another.
We will not dive into the implementation of these state management techniques in this blog. Let’s keep the implementation details for the next blog 🙂.
React State
React has provided its own state. This is basically an object where we keep the data required for a component and for every component where we want to handle its own data should be kept in particular state only.
This is very basic and very easy to learn. For smaller applications where the complexity is minimum, we can store the data in state and can also pass data the to other components (child component).
Having explained about this state, If you are new to react, I would suggest you focus more on the react concepts like props, event handlers, async actions, lifecycle hooks. Unless you are sure that your app getting complex and managing state is getting difficult, just keep away any state management library and just focus on react State.
MobX
MobX is basically a standalone library but it is mostly used to react. Also, it is considered to be a Flux based framework but it’s different from it because it provides functional reactive programming.
MobX is very simple to learn and requires less time for learning as compared with redux where you have to learn a lot before you can start implementing it, still you will get confused many times. But with MobX you can just learn and can implement in no time.
MobX comes with very less boilerplate code as it is designed to handle pages with fewer constraints. Though you can use it for larger projects but the project must have fewer constraints.
MobX is also recommended by some developers, those who love object-oriented programming rather than functional programming. And those who come from angular background prefer it because of the use of Observers. Observable values used inside the components and they are watched by observers, whenever observable value changes in any component then it get notified to other observers also.
Additional Mobx has multiple stores to handle the state and its state is mutable means its data can be read and write by the user in the store itself and hold the advantages of functional programming.
Flux
Flux is neither a library nor a framework, this is just the architecture that Facebook uses for building client-side web-application in react.
It uses a unidirectional data flow and you can start immediately without learning a lot. Though it is a little bit tougher than MobX but easier than Redux.
Flux was introduced by Facebook to solve their problem of bidirectional flow of data. Flux solved it by introducing a unidirectional flow of data between components.
Like MobX it also has multiple stores and its state is mutable but it allows the number of constraints which helps to write generic algorithms which is useful to handle the multiple pages, therefore, it is used for a larger application.
Flux is easy to debug you will easily get to know how the data flows in the application on other hand MobX is difficult to debug as you will get confused how the data passes between store and component.
Redux
Redux is a library which is used to keep the state for javascript applications. It is mostly used with the react though it’s compatible with other frameworks like angular.
Redux is needed when the data is being shared by your large number of components and the data keeps on changing and the view needs to be refreshed.
Redux has one and the only store where the entire application data is stored and is being shared by all the components. Each component has direct access to the state without sending the props to the child.
Redux state is immutable which is one of the biggest constraints of the redux. How it is immutable, I won’t explain here as it will be difficult to digest right now, well I just tell you it uses the pure functions due to which it handles its immutability.
To handle the asynchronous function redux uses middlewares such as saga and redux-thunk that’s another level of thing that you have to learn to get the asynchronous data.
Conclusion
Well, that’s all, you can choose whatever you want to depends upon your need. I hope I have provided a basic understanding of state management.
❤️ Like, Share or Leave A Comment!
If you enjoyed this post, don’t forget to give it a 👏🏼, share it with a friend you think might benefit from it and leave a comment! Stay tuned for more exciting blogs on Flutter, Elixir, React, Angular, Ruby, etc.
Thanks !!
