Demystifying React Hooks

Photo by Anaya Katlego on Unsplash

You probably heard about the new concept for React called hooks. Hooks were released in React version 16.8 and they let us write stateful components, without using the class syntax.

This article is a gentle introduction to hooks. If you want to learn more about hooks, this the right place.

What React hooks look like (decoded later)

In a nutshell, it was difficult to reuse state, logic, and functionality between class components. You had to either pass props down or use render props, which lead us to the problems of (a) huge components, (b) duplicated code between components, or (c) complex patterns like high order components.

Hooks apply the React philosophy (explicit data flow and composition) inside a component, instead than just between the components.

Refactoring a React component from class to hooks

Keep in mind hooks are still relatively new and no one expects you to refactor your app to only using hooks. But it’s doesn’t hurt to try something new and improve the overall structure and quality of the codebase.

Take the following React class component.

The component has three responsibilities which are;

  • Saving the search state
  • Changing the search state
  • Rendering the search UI

There’s nothing really exciting about the component, but there are always ways to improve. How would you improve the component to using hooks?

Hooks to the rescue

Let’s turn the same class component into a hook based component. We won’t change any functionality of the search itself, but just refactor the code from class to hook syntax.

Woah! From 29 lines to 17 lines of code. If my math doesn’t fail me, that’s a whopping 41.3% decrease in how much code we have to write.

If we could save 41.3% time for each component, on paper, we could write our app in almost half the time. Reducing the time we need to write our app by half is overly optimistic, but it could happen, only time will tell.

Change is the only constant in life, so let’s crack open and demystify how hooks work.

The first thing we need to hooks is to import the useState from the React package.

Defining our state with hooks looks like this;

This might throw you off for a second, I know it threw me off. What are the array brackets doing in there?

The array bracket syntax is called array deconstructing assignment.

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

The destructuring assignment uses the left-hand side of the assignment to define what values to unpack from the sourced variable. Here’s an example to illustrate.

If you would like to learn more about destructuring, check out this article.

Going back to searchFieldValue is the first value, which is the initial state.

The second argument handleSearchFieldChange is just a function, which lets us change the searchFieldValue state based on what we passed as the argument.

And to drive the point home one more time.

So there we go, we’re no longer obligated to use the class-based syntax whenever we have stateful components.

Should I use Hooks, classes, or a mix of both?

The official React documentation is well articulated on the subject.

When you’re ready, we’d encourage you to start trying Hooks in new components you write. Make sure everyone on your team is on board with using them and familiar with this documentation. We don’t recommend rewriting your existing classes to Hooks unless you planned to rewrite them anyway (e.g. to fix bugs).

Here’s how you would create a toggle switch with React hooks;

Notice how you can pass any value or type to useState() — we’re passing a boolean to be the initial state. You could even pass an object, array, or numbers, just like with setState({})

Now go and play with React hooks! Start slow and small, try to create a few components with hooks and let us know how it went.

Play with the live version here.

If you enjoyed this article, you might enjoy some of my previous articles too.