Understanding React Hooks - Part One

In this blog post, we will learn the following topics:

• The new React Hooks and how to use them
• The rules of the Hooks

React Hooks

React Hooks aer a new addition in React 16.8. They let you use state and other React features without writing a React class component. React Hooks are also backward-compatible, which means it doesn't contain any breaking change and it doesn't replace your knowledge of React concepts.

Using the State Hook

You probably know how to use the component state by using it in a class with this.setState. Now you can use the component state by using the new React useState Hook. First, you need to import the useState Hook from React. (Note: since React 17, the React object is no longer required to render JSX code.)

import { useState } from 'react;

Then you need to declare the state you want to use by defining the state and the setter for this specific state:

// javascript
const Counter = () => {
  const [counter, setCounter] = useState(0);
}

As you can see, we are declaring the counter state with the setCounter setter, and finally, we set the initial value with zero. In order to test our state, we need to create a method that will be triggered by the onClick event. Finally, we can render the counter state and some buttons to increase or decrease the counter state:

const Counter = () => {
  const [counter, setCounter] = useState(0);

  const handleCounter = (operation) => {
    if (operation === 'add') {
      return setCounter(counter + 1);
    }
    return setCounter(counter - 1);
  }

  return (
    <p>
       Counter: {counter} <br />
       <button onClick={() => handleCounter('add')}>+ Add</button>
       <button onClick={() => handleCounter('subtract')}>- Subtract</button>
    </p>
  );
}

As you can see, the useState Hook is a game-changer in React and makes it very easy to handle the state in a functional component.

Rules of Hooks

React Hooks are basically JavaScript functions, but there are two rules that you need to follow in order to use them. React provides a linter plugin to enforce those rules for you, which you can install by running the following command:

npm install --save-dev eslint-plugin-react-hooks

Let's look at these two rules:

Rule 1: Only call Hooks at the top level

From the official React documentation (https://reactjs.org/docs/hooks-rules.html)

"Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That's what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls."

Rule 2: Only call Hooks from React Functions

From the official React documentation (https://reactjs.org/docs/hooks-rules.html)

"Don't call Hooks from regular JavaScript functions. Instead, you can:

• Call Hooks from React function components.
• Call Hooks from custom Hooks

By following this rule, you ensure that all stateful logic in a component is cleary visible from its source code."