Demystifying React Hooks: Part 1

What are Hooks and how can I use them to access the state system?

Hooks were first introduced at the React conference in 2018 and have been taking over modern React ever since. Prior to Hooks, class components were the only way to access state and lifecycle methods. Functional components were strictly used to display content to the user. However, now it is possible to create full-fledged functional components with access to state, lifecycle methods, and much more with Hooks.

This article addresses the following questions:

• What are Hooks and why use them?
• How can I implement state system using Hooks?

What are Hooks and why use them?

According to the React docs,

“Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.”

In a nutshell, Hooks give additional functionality to functional components. If you have ever built a React application, you have probably encountered a situation where you needed to give a functional component additional behavior (state, fetch data at a specific point in time, etc.). When that happens, you have to go through the hassle of defining a class and reconfiguring the entire component. This can take a considerable amount of time, leads to more lines of code, a multitude of ‘this’ references, and ultimately more complicated components. Across an application, this can make components more difficult for the computer, others, and even the person writing to understand 

With Hooks, you no longer have to worry about switching functional components to class components. React comes with ten built-in Hooks (which are just functions) that allow you to “hook in” to React features in functional components. You can also create your own custom Hooks, which allow you to reuse stateful logic in multiple components (a cool topic for another time).

Before we dive into an example, let’s review the two kinds of components: class and functional.

The diagram below is adopted from Stephen Grider’s course on Udemy (where I first learned React and would HIGHLY recommend). The diagram shows the similarities and differences between component types in modern React with the implementation of Hooks.

So with Hooks, now both class and functional components can show content to the user, keep track of state, and access lifecycle methods. Let’s look at an example of a simple SearchBar component using a class component and a functional component.

Class Component

In a class component you must:

1) Import React

2) Define a constructor function that takes a props argument

3) Call the parent constructor with props

4) Initialize state and set a default value

5) Define a render function that returns a block of JSX

6) Attach an onChange event listener on the form input

7) Define a callback that uses setState() to update state and trigger a rerender

Functional Component

In a functional component you must:

1) Import React and useState Hook

2) Initialize state by calling useState( ) Hook

3) Return a block of JSX

4) Attach an onChange event listener on the input

5) Define a callback that uses setTerm( ) to update state and trigger a rerender

What do you notice about the way the code is written?

The class component has a few extra steps and additional lines of code. While this might not seem like a big deal in a simple component, imagine the size of components in large applications.

Even if this is the first time you are learning about React, which code is easier to understand?

Because Hooks allow you to separate state and use a declarative style, the functional component may be easier to read. Which brings us to our next topic, what is going on with the useState( ) Hook?

2) How can I implement state using Hooks?

useState( ): Hook that allows you to set state in a functional component.

Let’s look at the SearchBar example from above:

const [term, setTerm] = useState(‘ ’)

A few things are happening in this line of code:

1) The useState( ) function is being invoked with an empty string. The useState( ) function accepts one argument, the default piece of state. In this example, the default term is an empty string.

2) The useState( ) function returns an array with two elements inside of it. The return values are being assigned to term and setTerm using array destructuring.

a. The first element is the piece of state we are keeping track of (term)

b. The second element is a function you call to update state (setTerm)

To recap, the term displays the current state and setTerm is the function to update state. When it is time to update the state, setTerm(‘some value’) is passed a value, which becomes the new state value (term).

I hope this post helped clear up some of your initial questions about Hooks and using state within functional components. Be on the lookout for more articles on how to leverage other React Hooks. Happy coding!

Resources:

• React documentation: https://reactjs.org/docs/hooks-intro.html
• Stephen Grider: Udemy Modern React with Redux