Basic understanding of React Hooks (useState and useReducer)

What are React Hooks?
React hooks are the new feature introduced in the React version 16.8. They allow us to have state in functional components, and they ensure that we have access to other features of React without writing classes.
When writing functional components, we do not need to write class before adding state; hooks take good care of this. This guide is going to carefully explain to us some common React Hooks, how and when they are used in applications.
In this article, I will take you through a step by step guide into understanding how the useState and useReducer hooks work, and how to implement them in your various projects. Feel free to peruse every line of this writing.
useState Hook
As mentioned earlier, React has to two types of components, namely: Class and Functional components. Class components are ES6 classes that extend React while functional components are simply JavaScript functions. The useState hook allows us to track state in a function component. It is very important to note that a state refers to data or properties that need to be tracked in an application. The react useState hook enables re-render.
Import useState()
To use any of the hooks, they must first be imported from React, and the useState hook is not an exception to this. Below is a code snippet of how to the import useState hook.

The useState hook, like every other hook, after being imported, is destructured. Below is a code snippet on how useState is used to increase a counter, and the increment is being re-rendered. The code ensures that at each click on the button, the state value is increased by one.

The useState hook above contains both the name of the variable ‘counter’ with the initial value set to zero (0), and also the corresponding function ‘setCounter ’ which helps to change the value of the variable. Depending on the problem you intend solving, the initial value of your variable could be any of the data types, namely: string, Boolean, number, object.
To further expand our understanding of the useState hook, I will give an example on how to set the initial value of the variable to a string, and how to display data to user view. The code snippet below shows this:

The code above sets the initial value of inputValue to a string and with the onChange property of the input, the value typed into the input field is targeted. To display the value to the view, simply place the variable name in curly brackets as seen in the code snippet above.

useReducer Hook
The useReducer hook is an alternative to the useState hook. It lets you separate the state management from the rendering logic of the component. It is very efficient in managing complex and robust state hooks in React applications. The combination of the useReducer and another hook like the useContext (to be explained in my next article) can be a good and efficient tool to management state.
The useReducer hook accepts a reducer function as its first parameter and an initial state as its second. It returns an array that has both the current state and a dispatch function. The dispatch function allows you to pass as a parameter which can be invoked.

Import useReducer
To use the useReducer hooks, it must be invoked from react.

The use reducer works in a similar way with Redux. When invoked, it contains a reducer function and the default state of the application. The reducer is executed by the JavaScript reduce() method. The reducer method accepts two parameters, namely, the current state and the action. Like I said earlier, the state is the data that is being manipulated or changed in the application.
The code snippet below shows the reducer and its respective parameters:

The reducer function accepts an action, this action is executed by the dispatch function. Below is a code snippet of counter app that increases the number of counts each time the button is clicked and it toggled the text at the same time.

From the code above, the initial state is set to zero (0) and the text is shown by setting its value to true. Then a reducer function is created, it accepts the current state of the counter as an argument and an action. The application state get updated by the reducer action type (action.type).

Conclusion
In conclusion, both hooks do the same things, in that they can be used to manage state and re-renders. While useState is a basic hook, useReducer is used for more complex state logic. The useReducer is to be used once the applications gets larger in size, and state transitions are getting complex.
In this article, we went through two react hooks; useState and useReducer. We learned how each one is used and for what reason they will be used. We also saw the advantage of one over the other.
That’s all for now! Feel free to share in the comments section below your thoughts about this article.