usestate vs usereducer hooks

In this article, we will learn when to useState hooks vs useReducer hooks. Remember both of them are meant for state management.

• The first scenario depends on the type of state variable. If you trying to manage primitive types like numbers, strings, boolean, etc useState is the better option. If you going to manage the object of an array, you can useReducer hooks. For example, if you want to manage the count value as a state variable useState is the better choice but if you are managing the person object that contains the first thing or last thing or each you better useReducer.
• The second scenario depends on the number of state transitions. If you have updated one or two state variables, useState should be fine. But if you have five or ten separate set state calls you should definitely consider moving that logic into the reducer function. The main reason behind that is it makes your state conditions predictable. You would be updating several state variables but all of that would be happening in one place which is the reducer function. This also makes it easier to reasonably by other developers.
• The third scenario depends on the related state transitions. To fetch data using a reducer hook, there are three step variables loading, host, and error. Typically you want to manage with usestate hook. However usestate user would be better as state transitions are related to the specific action. All three state variables are updated together either when the data is fetched successfully or when there is an error. By making use of useReducer your code is more predictable and maintainable. If everything is to manage different places usestate it becomes must harder to reason about.
• The fourth scenario depends on business logic. If you state a transition from an old value to a new value, we require some business logic or even complex data transformation or manipulation you are better off using usereducer hook. That way all logic looks like the reducer function and you have better separation of consult.
• The fifth and final scenario deals with local vs global states. If you want to maintain local components state useState is a great choice. However, If you want to maintain the global state that can be altered by components deep in the componentry useReducer is a better option. We will of course use the context hook but using the reducer hook over the state hook has a very simple advantage. With useReducer we simply have to pass the one dispatch method down the componentry. That one dispatch method can update several state variables based on the action type. With useState hook, we would have to pass down multiple update functions one for each state. So, global state management useReducer is the best choice.