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
According to ReactJS official documentation, there were three primary reasons for the release of React Hooks. First, prior to Hooks, it was very difficult to reuse state logic between components. Hooks allows you to reuse state logic between components without changing their composition. Second, classes are tough to use and sometimes confusing. In order to use classes you would have to understand how this in JavaScript works, which is very different from other languages. React Hooks helps to make that transition from other languages easier and allows developers to gain the benefits of React without having to use classes. Lastly, it helps to simplify components by allowing developers to separate a particular single component into various smaller functions based upon what pieces of the separated component are related.
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 useState and 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!
useState()
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.
Conclusion
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!