What I Have Learned Using React Hooks Part I

Sam Chen
Sam Chen
Nov 20, 2020 · 5 min read

React is one of the most popular JavaScript framework (library) along with Angular and Vue, but hands down React is the easiest and beginner friendly when it comes to learning and getting used to it. (React is a much small library comparing to Angular). When I first started learning React, one of the biggest issue for me was to manage the state. Here is when React Hooks comes in, because it can greatly reduces the amount of pain when it comes to state management in React. Today we will take a look at how to manage state with React Hooks (useState).

There are so many tools provided by React Hooks, but we want to go over the essential ones and the most important tool (in my opinion) is the useState feature. First thing first, in order for us to begin using React Hooks, we need to understand that it can only be used in a functional component, not class component (shown in above code snippet). Another rule to simply follow is that react hooks is we cannot call hooks inside loops, conditions and nested functions (details rules will be linked here for your viewings). React will give us errors when we try to use hooks within loops, conditions or nested functions.

Now Let us take a look at a simple example uses of React Hooks useState feature. From above code snippet, we can tell right the way, the first line is to de-structure useState from React, this way we simply don’t have to write React.useState()every time we want this feature. In this example, we have noticed that it is rendering two buttons to increase or decrease the number in the middle. First usage of useState is shown in line 4, where we set an array of two values, the first value is the current state value, which is count in our example, shown in line 17 when we input the number in <span> {count} </span> . The second value is a function that we call setCount to update the current count. This setCount is being used line 6 through line 12 to increase / decrease the count based on the buttons that we click on. On the right side of the equation we define our useState and set the initial value to 0.

Based on this simple example, we can click on the — or + buttons to decrease or increase our count. But there are a few errors, or should we say practically not the best usages of useState feature for React Hooks. Let us take a look at the above code snippet to see a different usage of useState. We can tell that in line 9 our useState is now a callback function that calls countInitial(). Why do we do that? It is because using a callback function when we are initializing useState means that we only want it to run once, if we initialize useState to a number or function, it will run every time we render the page (essentially when we increase or decrease the count, the countInitial will run again). But if we set it to a callback function, it would only run once when we first render this page. It can be especially helpful when the function gets more complicated and requires lots of calculations. This will significantly reduce the amount of things that need to re-render each time when we render this page, and it can be very helpful to a larger application. Obviously in our simple example, setting useState(0) is not a problem since we are only calculating the count number.

From this code snippet above, we can see another problem when we are using setState. In this example, we are trying to initialize count1 to 0, count2 to 1, and increase or decrease only count1 number when we press those buttons, however, the count2 number disappear as soon as we click the + or — button, which is because React Hooks doesn’t automatically update and set everything inside an object to what we want. Instead it is overwritten by what we returned on line10 and line16. The solution to this problem would be to return everything in the object on line10 and line16 return { ...currentState, count: currentState.count — 1} This will allow us to return everything else in the current state, then increase / decrease only the count1 number in our example. This brings up another point about using React Hooks, we want to use hooks to manipulate state easier! By easier I mean we want to manipulate it individually instead of it all clumped up into a single object, we can separate our count1 and count2 into two different useState.

In our code snippet above, count1 and count2 will increase or decrease base on the buttons that we click, and they are separated into two different states, setCount will manage the count1 number, and setCount2 will manage count2 number. While they are in a single function that increase / decrease count, we are able to manipulate them separately based on the actions and results that we want to count for. We don’t have to worry about our states clashing, since we separate and manage them into two different pieces of states.

There are so many other features that React Hooks provides (useEffect, useHistory, custom hooks that we can built on our own, and etc), and we are all in this together to explore these wonderful options built by our fellow programmers! Feel free to reach out to me via LinkedIn to chat with me! Thanks for reading and have a great day!