This is blog is enforced upon me because I wrote an earlier blog comparing class components and functional components in Reactjs. However, towards the end of that blog I wrote that the main differences in use case between the two are nonexistent due to the implementation of React Hooks. I did not want to write an entire blog within another blog explaining Hooks. Thus, this article is to expand my knowledge on React hooks and explain what they are and why should we use them.
What are React Hooks?
To further my knowledge of React Hooks, I did what any level-headed programmer would do, READ THE DOCS! (sorry for the text screaming but that’s how reading documentation was emphasized to me since it’s such an important concept). If you go to Reactjs’s site and look at the hooks overview, they do an amazing job explaining the concepts of Hooks and the very questions I have put in the title.
Straight from the docs: “Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.” Mentioned earlier, I wrote in a previous blog that class components were superior to functional components because class components were able to do things like manipulate state of data creating responsive components, whereas the functional components were static and referred to as “dummy components” prior to React v16.8. Since Hooks functional components are allowed to do the same things, and actually the React Devs explain functional component with Hooks is probably the better option.
The React Devs list many reasons why Hooks are better to use (mainly because the motivation to create Hooks was to solve a variety of problems in React they have encountered over the years.) One example they portray is the concept of classes. The documentation states that classes can be confusing. For example, most people find it easier to understand props, state, and the top-down flow but still struggle with the concept of classes. The “this” keyword is something you would have to understand to a high extent to become a better programmer. Thus, with Hooks you can do all your fancy dynamic rendering without classes. Also, why are they called Hooks? Answer from the docs: “Hooks are functions that let you “hook into” React state and lifecycle features from function components.”
One of the main Hooks and probably the most used is the State Hook: useState. useState is called inside a function component to utilize local state. You initialize useState by declaring two variables, first value is like “this.state” and the second is a function to update the like “this.setState”. Here is an example code:
Looking at some code we can better understand the syntax and discover how it works. The image shows a function component importing useState from React and declaring two values to useState(0). The argument in useState is the initial state. Below in the return there is an event handler that increases the count by 1 on click using the setCount function. That’s it! Pretty simple and and easy to understand.
Another Hook is the Effect Hook, useEffect. Think of useEffect having the same abilities like componentDidMount and such. Let’s look another great example provided to us from the React Docs.
The image shows how useEffect works. Similar to the componentDidUpdate lifecycle method, whenever the user clicks the button it will update count which in turn will run the “effect” of changing the title to the string with interpolated value of count.
There are just two examples of React Hooks, but we already see how they are doing exactly what class components are used for. Additionally, there are about 10 hooks in total but I figured it was best to just delve into the more common ones. Here is a much detailed list of all the hooks.
Hooks seems to be a great addition to React and after reading the documents it was clear why the developers thought it was a good idea to create Hooks. However, what’s great about Hooks is that you don’t HAVE to use them. You can keep your old class component exactly the same way and conceptually it will be fine. In fact, you may create new components with Hooks along with your class ones and everything will still work great! I’m glad I looked more into Hooks and I plan to start using them more. Especially, since the trend of functional components using Hooks is rising.