React Custom Hooks: Reusable and Efficient Stateful Logic

Hooks in react are built-in functions introduced in React version 16.8. React hooks allow the use of React library features such as lifecycle methods, state, and context in functional components without having to worry about rewriting it to a class.

What are custom hooks?
Custom hooks in React are a powerful and flexible feature that enables you to encapsulate and reuse stateful logic across multiple components. They are a way to extract logic from a component and encapsulate it in a reusable function that can be called from multiple components.

How to Create Custom Hooks?
Custom hooks follow a simple naming convention like built-in hooks, which is to prefix the name with "use" to enable react know that it is a hook. For example, a hook that fetches data from an API might be named useApiData or useFetch.

Custom hooks are built on top of the existing React Hooks API that is for it to be seen as a hook, custom hooks has to make use of at least one of the built-in hooks like useState, useEffect, and useRef. These built-in hooks allow you to manage state, perform side effects, and manipulate the DOM within functional components.

To create a custom hook, you start by defining a function that encapsulates the logic to be reused. This function can use any of the built-in React hooks or other custom hooks that you have created.
For example, let's say we want to create a custom hook that fetches data from an API and handles loading and error states. Here's what that might look like:

import { useState, useEffect } from 'react';

function useApiData(url) {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
const fetchData = async () => {
      setIsLoading(true);
      setError(null);
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
      } catch (error) {
        setError(error);
      }
setIsLoading(false);
}
  useEffect(() => {
    fetchData();          
  }, [url]);
  return { data, isLoading, error };
}

In this example, the useApiData function takes a URL as its argument and returns an object containing the fetched data, a boolean indicating whether the data is currently being loaded, and any error that occurred while fetching the data. Custom hooks can return any value, but it's a standard convention to return values in an array or an object as in the case of the example above.

To use this custom hook in a component, we simply call it like any other hook:

import React from 'react';
import { useApiData } from './useApiData';

function MyComponent() {
  const { data, isLoading, error } = useApiData('https://api.example.com/data');
let content = ‘’
  if (isLoading) {
    content = <div>Loading...</div>;
  }

  if (error) {
    content = <div>Error: {error.message}</div>;
  }
If(data !== null) {
    content = <pre{JSON.stringify(data, null, 2)}</pre>
}
  return (
    <div>
      {content}
    </div>
  );
} 

In this example, we import the useApiData function from a separate file where is was created and call it with the URL we want to fetch. We then use the values returned by the hook to render the component, handling loading and error states as appropriate.

One of the key benefits of custom hooks is that they allow you to encapsulate complex logic and make it easy to be reusable across multiple components. This can help to reduce code duplication and improve the overall maintainability of your code.

In summary, React custom hooks are a powerful tool that supports the extraction and reuse of stateful logic across multiple components. They are built on top of the existing React Hooks API and follow a simple naming convention. Custom hooks can encapsulate complex logic and help to reduce code duplication, making your code more maintainable and easier to work with.

For any questions: send me an email to Jude Ebeke