Demystifying React Hooks

You’ve probably heard about React’s exciting feature: Hooks. Introduced in React version 16.8, Hooks allow us to write stateful components without using the class syntax.

If you want to learn more about Hooks, this guide will provide a gentle introduction.

Why Use Hooks?

Before Hooks, reusing state, logic, and functionality between class components was challenging. You often had to pass props down multiple levels or use render props, leading to problems like:

• Large Components: Components became bloated with code.
• Duplicated Code: Repeated code across different components.
• Complex Patterns: Solutions like higher-order components (HOCs) were required, adding complexity.

Hooks apply the React philosophy of explicit data flow and composition within a component, rather than just between components.

Refactoring a React Component from Class to Hooks

Hooks are still relatively new, and no one expects you to refactor your entire app to use only Hooks. However, it’s worth trying them out to see how they can improve the structure and quality of your codebase.

Let’s start with a simple React class component.

1
import React, { Component } from "react";
2

3
class Search extends Component {
4
  state = {
5
    searchFieldValue: ""
6
  };
7

8
  handleSearchFieldChange = e => {
9
    e.preventDefault();
10
    this.setState({
11
      searchFieldValue: e.target.value
12
    });
13
  };
14

15
  render() {
16
    const { searchFieldValue } = this.state;
17
    return (
18
      <input
19
        onChange={this.handleSearchFieldChange}
20
        type="text"
21
        name="search"
22
        placeholder="search"
23
        value={searchFieldValue}
24
      />
25
    );
26
  }
27
}
28

29
export default Search;

This component has three responsibilities:

1. Saving the search state
2. Changing the search state
3. Rendering the search UI

While the component is functional, there’s always room for improvement. So, how can we make it better using Hooks?

Hooks to the Rescue

Now, let’s refactor the same class component using Hooks. We won’t change any functionality, but we will simplify the code.

1
import React, { useState } from "react";
2

3
const SearchWithHooks = () => {
4
  const [searchFieldValue, handleSearchFieldChange] = useState("");
5

6
  return (
7
    <input
8
      onChange={e => handleSearchFieldChange(e.target.value)}
9
      type="text"
10
      name="search"
11
      placeholder="search with hooks"
12
      value={searchFieldValue}
13
    />
14
  );
15
};
16

17
export default SearchWithHooks;

By using Hooks, we’ve reduced our code from 29 lines to just 17. That’s a 41.3% decrease in code, which translates to less to write, less to debug, and less to maintain.

Imagine saving that much time for every component in your app! While it might be overly optimistic to think you can cut your development time in half, the potential for significant time savings is real.

Let’s break down how Hooks work:

1. Importing Hooks: Start by importing useState from the React package.

1
import React, { useState } from 'react';

2. Defining State: Defining state with Hooks looks like this:

1
const [searchFieldValue, setSearchFieldValue] = useState('');

1. searchFieldValue is the initial state.
2. setSearchFieldValue is a function that allows us to update the state.

The array brackets might look unfamiliar at first. This syntax is called array destructuring assignment. It allows us to unpack values from arrays (or properties from objects) into distinct variables.

1
let x = [1, 2, 3, 4, 5];
2
let [y, z] = x;
3

4
console.log(y); // 1
5
console.log(z); // 2

And that’s it! We’re no longer required to use class-based syntax for stateful components.

Here’s how you would create the search component with React Hooks:

1
const SearchComponent = () => {
2
  const [searchFieldValue, setSearchFieldValue] = useState('');
3

4
  const handleSearchChange = (event) => {
5
    setSearchFieldValue(event.target.value);
6
  };
7

8
  return (
9
    <input
10
      type="text"
11
      value={searchFieldValue}
12
      onChange={handleSearchChange}
13
    />
14
  );
15
};

Should I Use Hooks, Classes, or a Mix of Both?

The official React documentation offers good advice on this topic:

“When you’re ready, start trying Hooks in new components you write. Make sure your team is on board and familiar with Hooks. Rewriting your existing classes to Hooks is not recommended unless you planned to rewrite them anyway (e.g., to fix bugs).”

Here’s an example of a simple toggle component using Hooks:

1
const ToggleComponent = () => {
2
  const [isToggled, setIsToggled] = useState(false);
3

4
  return (
5
    <label>
6
      <input
7
        type="checkbox"
8
        checked={isToggled}
9
        onChange={() => setIsToggled(!isToggled)}
10
      />
11
      {isToggled ? 'ON' : 'OFF'}
12
    </label>
13
  );
14
};

Notice that you can pass any value or type to useState()—in this case, we’re using a boolean. You could also pass an object, array, or number, just as you would with setState({}).

Start small by creating a few components with Hooks, and see how they fit into your development workflow.