What are the different ways to manage states in React?

Points to be informed
What is the state?
Why do we have to manage the state?
What are the benefits of doing that?
How can we achieve that?

What is the state?

React components has a built-in state object.

The state object is where you store property values that belong to the component which can be used in the future for rendering another component if it requires that property of the state.

When the state object changes, the component re-renders.

Why do we have to manage the state?

When we have to pass data from one component to another then it can be done easily, but if we want to pass our data in nested states then it becomes complicated which is called prop drilling i.e. passing the data as props from parent component to child component.

To avoid prop drilling we have to manage our state in such a way that it can be used by every component without prop drilling

What are the benefits of doing that?

It avoids the prop drilling is the biggest benefit and it makes the communication and sharing of data across components easy.

One more benefit of managing state is to avoid passing the pops to that component which don't require them

How can we achieve that?

We can achieve state management by creating the global state or global store to store the data and use it accordingly.

Made by Vighnesh chaurasia

In the above diagram, I have created a global state to store the data from each component, and components can use them according to their requirements.

Do we need a global store in every app?

No, because if it is a simple app where we don’t require multiple components then we can use local state management

Mainly there are two methods in creating react application class-based and functional-based.

If we are using a class-based component then we can store the state by using setState while using a functional-based component we must use a hook like useStates

Personally, I prefer using functional components over class-based components cause the hook’s simplicity.

Now comes the time where we will talk about global state management

There are mainly two types of global states management
1. Redux
2.Context API

Redux

Three fundamental principles of redux

• Single source of truth. The global state of your application is stored in an object tree within a single store. …
• The state is read-only. The only way to change the state is to emit an action, an object describing what happened. …
• Changes are made with pure functions.

Redux - A predictable state container for JavaScript apps. | Redux

Redux Approaches to be remembered.

• Actions(carry the information that sends data from the application to the Store)
• Reducers(responsible for how the application changes in response to an action made by an end-user)
• Store

Context API

In the release of React version 16.3, the new Context API was introduced as a solution to React prop drilling.

Context API Approaches to be remember

• Create the context (createContext())
• Provide the context
• Consume the context ( useContext())

Click Here for more details.

Conclusion

For creating a large and complex application, redux can be used while for small and less use of store context API can be used