Introduction to React Hooks and Using Them in Your React App
Welcome back, I’m glad you’re here! Today, I’m going to go over React Hooks because I’ve been working with them on my current project and I think they’re extremely useful. I’m going to do a quick walk-through that will hopefully get you on your way to using them in your next React App! I will be going over the purpose of hooks and why they’re so useful. Then, I will show you how to implement Hooks in your React App and guide you with an example. Let’s get started!
Introduction to React Hooks
React Hooks was a new API that was included in the roll-out of React v16.8 and was pitched as a new way to use state in functional components without creating a class. But, Hooks are much more powerful than that! Hooks allow React developers to use state and other lifecycle methods inside functional components. They also work well together with existing code, so they can easily be adopted into a codebase.
Benefits of React Hooks
Two Rules of React Hooks
There are only two rules that the React core team has outlined in their proposal that should be strictly adhered to when using React Hooks. The first is, do not use Hooks inside loops, conditions, or nested functions. By following the first rule, it “…ensures that Hooks are called in the same order each time a component renders and allows React to correctly preserve the state of Hooks between multiple
useEffect calls.” The second is, only use hooks within a React function. By following the second rule, it “ensures that all stateful logic in a component is clearly visible from its source code.”
How Do We Implement React Hooks?
Now that you have a better understanding of React Hooks you are ready to learn how to implement them. There are actually 10 built-in Hooks in React v16.8, but I will only be covering the most fundamental Hook, useState(). I’m going to go through an example to show you how useState() is used and the syntax. Once you learn how to use this function, you will be well on your way to implementing Hooks in your React App!
The useState() hook allows developers to update, handle and manipulate state inside functional components. As I stated above, it is the most basic and fundamental of the Hooks and will allow you to move away from using classes. Let’s look at the example below to explain the power and syntax of the useState() hook.
The first thing that we need to do in the component is make sure to import the useState() hook from React (see line 1). Now, as you can see above, I am able to use a function instead of creating a class for the App component. On line 5, you will see the syntax used to establish a state object, age. The second variable, setAge, functions the same as setState() when we use classes, and allows you to change the state object, age. The parameter within useState() is the default/initial value of the state object. Then you can see on line 7 that the setAge function is used to change the value for the age variable every time the button is clicked. You can see how it looks like on the browser below.
You can see in the browser that every time a user presses the button, the age, which is displayed as well, will increase by 1.
Now that you have gained all of the information and basics about React Hooks, you should be armed with the tools to implement them in your next React App! I did mention earlier that there are actually 10 different Hooks that come with the API. They can also be very useful in building clean functional components. However, with useState() you have enough to begin implementation. I challenge you read deeper into the React Hooks documentation to learn about the other Hooks in the API! I’m so glad you joined me again and if you’re keeping up, I’ll see you next week!