How to Build a Custom React Hook

Custom React Hooks are a powerful feature that allow you to extract and manage reusable logic in your React applications. They enable code reuse and provide functionalities that can be shared among different components, thus enhancing maintainability and readability. In this article, we’ll dive deep into the process of creating custom hooks, explore best practices, and provide illustrative examples.

What is a Custom Hook?

A custom hook is a JavaScript function whose name starts with the word “use” and can call other hooks internally. Custom hooks can utilize built-in React hooks such as useState, useEffect, or any other custom hooks you may have created. This allows you to encapsulate behavior and state management and then reuse it in multiple components.

Why Use Custom Hooks?

• Code Reusability: You can share stateful logic between components without altering their hierarchy.
• Separation of Concerns: Custom hooks can help separate business logic from UI components.
• Ease of Testing: Hooks can be tested independently, which simplifies unit tests.

Creating Your First Custom Hook

Let’s walk through the process of building a simple custom hook that manages a form input state. This will help to demonstrate the concept and how you can use it in a functional component.

Example: A useInput Hook

We will create a hook called useInput that manages the state of an input field. This will allow us to easily create form inputs that are connected to the state.

import { useState } from 'react';

function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return {
    value,
    onChange: handleChange,
  };
}

Using the Custom Hook

Now let’s see how to use our useInput hook inside a functional component.

import React from 'react';
import useInput from './useInput';

function MyForm() {
  const name = useInput('');

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Name: ${name.value}`);
  };

  return (
    
      Name:
      
      Submit
    
  );
}

In the example above, the useInput hook returns the value of the input and the handleChange function that updates it. By spreading {...name} into the input element, we ensure that the input field is connected to this behavior.

Best Practices for Creating Custom Hooks

When developing custom hooks, it’s essential to follow some best practices to ensure the code is clean, clear, and effective:

1. Prefix with ‘use’

As mentioned earlier, always start custom hook names with “use” to make it clear that they follow React hooks conventions. This also allows your hooks to be detected by the linter rules if you’re using tools like eslint-plugin-react-hooks.

2. Return Values Appropriately

Your custom hook can return several values, including state and methods to manipulate that state. Ensure that the API of your custom hook is clear to its consumers. You can return an object to improve the readability of the hook’s consumption.

3. Avoid Side Effects

Use built-in hooks like useEffect inside your custom hooks to handle any side effects rather than creating side effects directly within the custom hook. This keeps the behavior predictable and aligned with React’s functional approach.

4. Keep It Simple

The primary purpose of a custom hook is to encapsulate related logic. If your hook starts to grow in complexity, consider breaking it down into smaller custom hooks that can be reused together.

Advanced Examples of Custom Hooks

Let’s look at a few more advanced examples of custom hooks.

Example 1: useFetch

A useFetch hook can be an elegant solution for fetching data from an API. Let’s implement it:

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        if (!response.ok) throw new Error('Network response was not ok');
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

This useFetch hook will fetch data from the given URL, manage loading states, and handle errors. Here’s how you can use it:

import React from 'react';
import useFetch from './useFetch';

function DataDisplay() {
  const { data, loading, error } = useFetch('https://api.example.com/data');

  if (loading) return 
Loading...
;
  if (error) return 
Error: {error.message}
;

  return (
    

      
Data:
      
{JSON.stringify(data, null, 2)}

  );

}


Example 2: useLocalStorage
Another common use case for custom hooks is managing local storage. Let’s build a useLocalStorage hook:

import { useState } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue];
}

This useLocalStorage hook allows us to sync a state value with the browser’s local storage. Here’s how to use it:

import React from 'react';
import useLocalStorage from './useLocalStorage';

function App() {
  const [name, setName] = useLocalStorage('name', 'Bob');

  return (
    

       setName(e.target.value)}
      />
      
Your name is: {name}
    
  );
}

Conclusion
Custom hooks are an excellent tool for managing state and behavior in a clean, reusable manner. They can help keep your functional components lightweight and focused on rendering, while logic and side effects are managed separately. By following the best practices outlined in this article, and by creating robust custom hooks, you can significantly improve the maintainability and efficiency of your React applications. Start creating your own custom hooks today and elevate your React development.
Happy coding!