Why use hooks?
Previously any stateful logic had to be used within a class-based component, this later was found to cause an issue of an insane tree of nested components. Hooks later was introduced and helped by allowing people to have access to low-level building blocks in function components.
Explaining what the Ten built-in hooks do.
Before we get started using any hook we need to first make sure that we import the hook we want to use. In this case, we are importing the useState hook from the react library.
useState
useState is the most used hook and the easiest hook to understand and use. The purpose of this hook is to handle any data that changes and to re-render so that the user can then see the change.
In the screenshot above you can the following code block:
const [hook, setHook] = useState(5)The useState hook returns an array with two values that we can destructure by assigning them as variables. The first value, in this case, would be the name of the state (the changing or reactive data). The second is often known as the setter and is good practice to name it the same as the state with just set in front of it, finally, you will then set it equal to useState() and within the parenthesis, it takes an optional argument of the default state. Now let’s say anytime the state changes if the state is being shown within the UI and the state changes, it will re-render and show the new value to the UI.
In order to change the state’s value, you will need to call the setter variable in this case setHook(), and pass in what you want the state to be changed to. In this case, we will change the value of the hook to increase by one each time the button is clicked.
useEffect
This is the second most used hook and super important to know. This hook takes a function as the first argument with an optional second argument which we will get into soon. Essentially by default, this hook will run once when it is initialized then every time a state is updated, this means if you aren’t careful you could create an infinite loop. Now if you wanted to have more control of when useEffect runs then you would input a second argument also known as dependencies. If you input an empty array for the second argument then useEffect will run once when it is initialized and not run again. If you wanted to have it run when a certain state is updated then you can add the state into the dependencies array.
As you can see in the photo above, we are passing an arrow function as the first argument that will print out “hello” to the console. You can then see after still within the useEffect arguments that we passed an empty array as the dependency to specify we only want this to run one time and the one time it will run will be once the component is initialized.
Conclusion
This concludes the first two hooks! In the next post, I will go over use context, useRef, useReducer, and useMemo!
