Building a Custom Hook in React: Reusable and Composable Logic

Introduction

React Hooks were introduced in React 16.8 as a way to handle state and side-effects in functional components. One of the most powerful features of Hooks is the ability to create custom Hooks, which allow you to extract and reuse logic across your application.

A custom Hook is a JavaScript function whose name starts with “use”. This naming convention allows React to recognize it as a Hook. React uses the Hooks rules to ensure that Hooks are called in the correct order and only at the top level of your component. These rules, such as only calling Hooks at the top level of a component and not within loops or conditions, ensure that your component behaves correctly and re-renders properly.

Why you should create Custom Hooks?

One of the major benefits of using custom Hooks is the ability to reuse logic across your application. Instead of duplicating the same logic in multiple components, you can extract it into a custom Hook and use it wherever it is needed. This helps to keep your code DRY (Don't Repeat Yourself) and makes it easier to maintain.

Another advantage of custom Hooks is that they make your code more organized and readable. By extracting logic into separate functions, you can break down complex components into smaller, more manageable pieces. This makes it easier to understand and reason about your code, especially as your application grows in size.

Custom Hooks also make it easier to test your code. Since custom Hooks are just regular JavaScript functions, they can be tested in isolation using standard JavaScript testing tools. This is especially useful when testing logic that is shared across multiple components.

Custom Hooks also allows you to optimise your components, by using useCallback and useMemo, to improve the performance of your application by preventing unnecessary re-renders.

Creating a Custom Hook: useForm

Creating a custom Hook is as simple as extracting a piece of logic from a component and putting it into a separate function. For example, let's say you have a component that handles a form submission. You could extract the logic for handling the form submission into a custom Hook called useForm:

Now you can use this custom Hook in your component:

import { useState } from 'react';

function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);

  function handleChange(event) {
    setValues({
      ...values,
      [event.target.name]: event.target.value
    });
  }

  function handleSubmit(event) {
    event.preventDefault();
    console.log(values);
  }

  return { values, handleChange, handleSubmit };
}

import { useForm } from './useForm';

function FormExample() {
  const { values, handleChange, handleSubmit } = useForm({ email: '', password: '' });

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="email"
        type="email"
        placeholder="Email"
        value={values.email}
        onChange={handleChange}
      />
      <input
        name="password"
        type="password"
        placeholder="Password"
        value={values.password}
        onChange={handleChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Custom Hooks not only make it easy to extract and share logic across your application, but they also make it easy to test and reason about your code. Since custom Hooks are just regular JavaScript functions, they can be tested in isolation using standard JavaScript testing tools, such as Jest.

In summary, custom Hooks are a powerful feature of React Hooks that allow you to extract and share logic across your application in a reusable and composable way. They promote a more organized and maintainable codebase, and make it easy to test and reason about your code.