Introduction to React Hooks

In this article, I will talk about what are React Hooks, and why should we start using React Hooks. I will assume that you already understand the basics of React, such as function and class components, props, and state. If you are new to React, I highly recommend you to follow this tutorial from the React official website before you continue.

React Hooks are a new feature in React v16.8, which allow you to use React features without having to write a class. Previously, you can only use states inside a class component. With hooks, on the other hand, it is now possible to use states and other React features without writing a class. However, you should keep in mind that you cannot use hooks inside class components.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which is called "enabled"
  const [enabled, setEnabled] = useState(false);

  return (
    <button onClick={() => setEnabled(prevValue => !prevValue)}>
      {enabled ? 'Disable' : 'Enable'}
    </button>
  );
}

Hooks solve a wide variety of seemingly unconnected problems in React. Whether you're new to React or use it daily, you might recognise some of these problems.

There are three important reasons why you should start using React Hooks.

To work with classes, you have to understand how this keyword works in JavaScript, which is very different from how it works in most other languages. You also have to remember to bind event handlers in class components. On the React side, it is also observed that classes don't minify very well, and they make hot reloading very unreliable. With hooks, on the other hand, you will not have to face these problems as you don't work with classes anymore.

There is no particular way to reuse stateful logic between class components. Even though higher-order components and render props pattern do solve this issue, you would have to restructure your components which results in dirty codes. For example, to share stateful logic, you will end up wrapping your components with several other components. Hooks, on the other hand, helps us by allowing us to reuse stateful logic without changing our component hierarchy.

When you had to create a component for complex scenarios, such as data fetching and subscribing to events, you would have realised that the related codes is not organised in one place but scattered across different lifecycle methods. For example, data fetching is usually done in componentDidMount or componentDidUpdate. If you have to set event listeners, you set them up in componentDidMount and unsubscribe in componentWillUnmount. As you can see, related codes – data fetching – is split between componentDidMount and componentDidUpdate. Also, code for event listeners is in different lifecycle methods – componentDidMount and componentWillUnmount. Besides, completely unrelated codes – data fetching and event listeners – are placed in the same method. Breaking these codes into smaller chunks is also impossible due to stateful logic. Hooks, on the other hand, let you split one component into smaller functions rather than focusing on the component lifecycle.