Comparing React’s useState and useReducer Hooks

What is useState in React?

useState?is a compelling Hook for simplifying managing states in our React Application. In?useState?definition of the setter function is hidden

What is useReducer in React?

useReducer?Hooks is used to storing and updating states just like useState Hook but in?useReducer?definition of the setter function is built custom as will explain in a bit.

useState?is Built with?useReducer?under it? Let me Explain How?

Before jumping into it, we first define what Reducer is?in the context of React App.

What is Reducer?

Reducer?is simply a function that takes in a previous state as the first parameter, an action as the second parameter, and returns a new state.

(previousState , action) => newState        

Let's Start Comparing useState and?useReducer?and will see how?useState?is built with?useReducer.

const [ data , setData ] = useState([])
const [ data , setData] = useReducer((state , action ) => action , [])        

Above both examples have the same functionality so we can say that?useState?and?useReducer?can replace each other, No doubt useState is a little shorter syntactically but from a functionality perspective we can use any one of these Hooks.

Let's Make Reducer more practical and extensible Right now, our reducer has only one trick, It sets the state to one value let's fix this.

function reducer() {
switch (action.data) {
case "setData" : return action.data
default : return state
}}

const [ data , dispatch] = useReducer(reducer, [])        

In the above example, we fixed the issue of only one trick as now useReducer is able to update multiple types of data using a switch statement similarly we can use as many as we can to handle different types of data so we can now handle the functionality of multiple useState with just single?useReducer.?Also, we can separate the above reducer function into a separate file to share this logic between multiple components this makes useReducer more powerful compared to?useState.

Now in the case of useReducer to set data or update data instead of using?setData?we will use dispatch to update our state here is How?

dispatch( { type : "setData" , data : data })        

Similarly, if we want to use the same syntax for useState we can do it as well with some changes Here it is.

function reducer2() {
switch (action.data) {
default : return state
}}

const [data , setData ] = useState( reducer2 , [] )        

You can think of this as useState is just useReducer with only a default action type.

Summary

This article explores the concepts of?useState?and?useReducer, and demonstrates how useState is essentially constructed using useReducer. In the second section, the article illustrates how the syntax for both Hooks is identical. Additionally, it explains how useReducer can facilitate code reuse across multiple React components, and how it can reduce the need for multiple instances of?useState?by enabling the same functionality to be achieved with just one?useReducer.

If you found this article to be useful, kindly show your appreciation by giving it a clap.