Creating a Reusable `useFetch` Custom Hook

The Problem: Code Duplication

Imagine you have a Home component that fetches a list of blog posts and another component, say UserProfile, that fetches user details. Both would contain nearly identical useEffect blocks. If you need to change how you handle loading states or errors, you'd have to update it in both places.

This is exactly the problem custom hooks were designed to solve.

Creating Your First Custom Hook: useFetch

A custom hook is simply a JavaScript function whose name starts with use and that can call other hooks like useState or useEffect. Let's walk through the process of creating our useFetch hook.

The core idea is to move all the data-fetching logic (the state and the effect) out of the component and into our new useFetch function. This function will then provide the data, loading status, and error back to any component that uses it.

The following video provides a complete, step-by-step walkthrough of this process. It covers:

1. Creating the useFetch.js file and the basic function.
2. Moving the useState and useEffect logic into the new hook.
3. Making the hook generic by accepting a url as an argument.
4. Returning the state values from the hook.

Using the useFetch Hook in a Component

Once the useFetch hook is created and exported, using it is incredibly simple. You can remove all the useState and useEffect logic related to data fetching from your component and replace it with a single line of code.

This makes your component much cleaner. It no longer needs to know how the data is fetched; it just needs to know that it's getting data, a loading status, and a potential error from our hook.

Here is a summary of the code transformation:

Before (in Home.js):

import { useState, useEffect } from 'react';

const Home = () => {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('http://localhost:8000/blogs')
      .then(res => {
        if (!res.ok) {
          throw Error('Could not fetch the data for that resource');
        }
        return res.json();
      })
      .then(data => {
        setIsLoading(false);
        setData(data);
        setError(null);
      })
      .catch(err => {
        setIsLoading(false);
        setError(err.message);
      })
  }, []);

  // ... JSX to render data, loading, or error ...
};

After (using the hook):

// In useFetch.js
import { useState, useEffect } from 'react';

const useFetch = (url) => {
  // ... all the useState and useEffect logic is here ...
  return { data, isLoading, error };
};
export default useFetch;

// In Home.js
import useFetch from './useFetch';

const Home = () => {
  const { data: blogs, isLoading, error } = useFetch('http://localhost:8000/blogs');

  // ... JSX to render data, loading, or error ...
};

Look at how much cleaner the Home component has become!

Preventing Errors on Unmounted Components

There's one more crucial improvement we should make. What happens if a user navigates away from a component while our useFetch hook is still fetching data? When the fetch call completes, it will try to call setData, setIsLoading, etc., on a component that is no longer in the DOM. This causes a common React warning: "Can't perform a React state update on an unmounted component."

To fix this, we can use the cleanup function that useEffect provides. The function you return from useEffect is executed when the component unmounts. We can use this to set a flag that tells our fetch promise to ignore the result if the component is gone.

This article provides an excellent, detailed guide to building a robust data-fetching hook. We will focus on the two most relevant sections.

Now, let's address the unmounted component problem.

By adding this cleanup logic, your useFetch hook becomes much more robust and safe to use across your entire application.

Conclusion

Congratulations! You've just unlocked one of React's most elegant patterns for code reuse. By abstracting repetitive logic into custom hooks, you can build cleaner, more maintainable, and more testable applications. The useFetch hook is a classic and incredibly useful example that you'll likely use in almost every project.

Key Takeaways:

• Custom hooks are reusable functions starting with use that let you share stateful logic between components.
• The primary motivation for creating a custom hook is to avoid duplicating logic (DRY principle).
• To create a useFetch hook, you move the useState calls for data, loading, and error, along with the useEffect call for the fetch request, into a new function.
• The hook should be made generic by accepting parameters like the url.
• It should return the state values needed by the component, typically as an object: { data, isLoading, error }.
• Implementing a cleanup function in useEffect is crucial for preventing memory leak warnings when a component unmounts during a pending API request.

Next Up:

The didCancel flag we just implemented prevents state updates, but it doesn't actually stop the network request. The request still completes in the background, consuming bandwidth. In our next lesson, we will explore a more advanced technique to handle API request cancellation using the AbortController API, which truly cancels the fetch request in flight.