Using and Building React Custom Hooks – A Developer’s Guide

November 01, 2023

Using and Building React Custom Hook A Developer’s Guide

Before React Hooks, accessing a state or lifecycle in functional components was a dream. The feat only became a reality recently.

Table of Contents

Now with React hooks, you can access state or lifecycle no matter where you are, while React custom hooks give you the liberty to do more. Above all else, they let you build a shared component logic and use it across multiple other components.

Primarily, they work like functions, enabling developers to work with many arguments and expose methods and values to build easy-to-manage React apps.

Let’s see some React custom hooks examples to understand what they do.

React Custom Hooks Examples

New and better react custom hooks hit the market daily to help developers code in ways unimaginable before. Here are some top ones:

use-clippy à It helps edit the user’s clipboard and read and write updates.
use-mouse-action à It tracks and handles up and down mouse events.
@rehooks/online-status à It lets you subscribe to online/offline meets.
useToggle React Hook à It toggles values the other way.
useDebounce React Hook à It debounces fast-changing values.

Why Use React Custom Hooks?

React custom hooks help make the code efficient and save you from repeatedly using the same logic. They work like a charm, keeping your code short and sweet and management simple. With the newly-found ability to reuse logic at will, react custom hooks help you code efficiently and build easy-to-manage applications. Thus, they improve your code readability, management, and overall performance.

Using a React Custom Hook

Using custom hooks in React is straightforward. However, to use it correctly, you must factor in the required argument and the data it exposes. For instance, if the hook unveils an object, the following key will work:

const { key1, method1 } = useCustomHook()

On the contrary, if the custom hook exposes an array, you must use a different name to extract values like:

const [online, setOnline] = useCustomHook()

const [number, setNumber] = useCustomHook()

However, it is a must to remember that React custom hooks don’t function as a global state. Thus, you cannot share or transfer states across components. All the data and state are transferred to the component in use when you apply the hook, and that’s how it works.

Building a React Custom Hook

Now, let’s build a custom hook to handle data collection (fetching) from an API. First, create a new JavaScript file and define the custom hook.

// useFetch.js

import { useState, useEffect } from 'react';

const 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 jsonData = await response.json();

        setData(jsonData);

      } catch (error) {

        setError(error);

      } finally {

        setLoading(false);

      }

    };

    fetchData();

  }, [url]);

  return { data, loading, error };

};

export default useFetch;

In the above syntax, we created a custom hook using the useState and the useEffect. It executes the URL and returns an object with fetched data, error, and loading states.

Now, let’s use the hook in a component:

import React from 'react';

import useFetch from './useFetch';

const MyComponent = () => {

  const url = 'https://api.example.com/data'; // Replace with your API endpoint

  const { data, loading, error } = useFetch(url);

  if (loading) {

    return <div>Loading...</div>;

  }

  if (error) {

    return <div>Error: {error.message}</div>;

  }

  return (

    <div>

      <h2>Fetched Data:</h2>

      {data && (

        <ul>

          {data.map((item) => (

            <li key={item.id}>{item.name}</li>

          ))}

        </ul>

      )}

    </div>

  );

};

export default MyComponent;

The example above shows the React custom hook in action, taking the URL of the API endpoint and returning the fetched data, error state, and loading state.

The Final Word

React custom hooks gives developers flexibility previously unheard of and help them curb the repeated use of logic and build applications in React efficiently. In this detailed developer guide, we discussed React custom hooks, what they do, why use them, and how to build and use custom hooks in React. Use the example to create custom hooks and write easy-to-manage codes in React.