What is State? And why do you need to manage it?
The State is an important concept in React that stores data and displays the behavior of a component. People choose different approaches for managing State in React. Let us delve into the basics of React State and different ways to manage it.
Updating the State of a component is easy. But what if you want to update it in child component? This is where it becomes tricky.
In React, State is immutable. It should not be altered directly. For updating the child component, you need to pass a function to the child as props, which will then update a parent State. It cannot be mutated directly in the child. This approach is efficient if the scope of the project is smaller. Whereas, in large project component structure (a project heavy on hierarchy), it would be a repetitive job which makes no sense.
The ultimate objective is to improve the performance of an application. As a React user, your objective is to minimize the use of State and it’s mutation.
State management can be omitted. One can build an application in a much better manner without using State management too. Here are the scenarios where people may need to manage application State:
Tools of State management
1.Services
What is a Service?
Service is nothing but a set of functions at one place. You can store variables and functions that are needed by more than one component in the Service. Service can be accessed directly by importing it in the required components, or by providing it to a parent and passing as props to other children.
Example: This is one of the simple solutions that we have tried with to manage State instead of having other complex State management tools.
Above example contains a service consisting JSON array of an e-commerce cart with data and functions to access or update the cart.
Using Service is a good approach to maintain the component State but it also restricts the use of other React features like observables.
2.Redux
Redux is a design pattern used to structure your application. It maintains a single immutable Store and a function that returns a new State on every action.
Redux structure:
The three concepts used in Redux are:
The interesting part of Redux is that the changes will only affect the initiated component and respected variables from the Store. Applications without using Redux need to change everything in the component hierarchy. On the other hand, Redux mutates the Store values and reflects those variables of the Store directly in the components which are using those. It will not check the hierarchical function of components to change the State of that particular component. To learn more about Redux please refer - https://redux.js.org/introduction/getting-started
When to use Redux?
When not to use Redux?
3.Mobx
Mobx has two parts:
Why Mobx?
When to use Mobx?
Mobx is much easier to learn because the majority of JavaScript developers are familiar with OOP. There is a lot of abstraction in Mobx and is easy to test. To learn more about Mobx refer - https://medium.com/react-native-training/ditching-setstate-for-mobx-766c165e4578
4. Context API
Context API is used to share data between components without explicitly passing props to every level of the component tree. It is suggested to use props if a project has few levels of children.
Concepts used in Context API:
5.Hooks
As an application grows managing Stateful components become difficult. Hooks allow us to break components into smaller functions. You can also write a custom hook. To learn more about hooks please refer - https://reactjs.org/docs/hooks-overvie
Specifications
Mobx
Redux
Store
Data
Functions
Learning
Debugging
Maintainability
Conclusion
Complex applications lead to complex State management. Cases where multiple components need to be handled and could increase in time, you may choose any of the React State management tools. Since a simple and easy application is always desired, avoiding State management would be advised. However if in case a project needs to have component State then it needs to be handled properly. The more you care about State management the more complexities arise.
Credits
Abhay Kumar.