Implement useFetch() Custom Hook in React

Implement useFetch() Custom Hook in React

Learn how to create a custom hook in React, useFetch, that simplifies data fetching from APIs and manages loading and error states efficiently.

Step 1: Define the useFetch Hook

import React, { 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('Failed to fetch data');
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
};

1. Initialize States

The hook begins by setting up three pieces of state:

• data → stores the fetched API result

• loading → tracks if the request is still ongoing

• error → captures any failure during the fetch

These states help manage the complete request lifecycle.

2. Trigger Fetch on URL Change

A useEffect runs automatically whenever the url changes.
This ensures that new data is fetched each time a different endpoint is passed.

3. Fetch Data Asynchronously

Inside the effect, an asynchronous function performs the API request using the Fetch API.
This allows React to handle network requests cleanly without blocking the UI.

4. Handle Success and Errors

If the request succeeds, the fetched data is parsed and stored in data.
If it fails (due to network or response issues), the error is caught and stored in error.

5. Update Loading Status

Once the request completes — whether successful or not — the loading flag is set to false, so the component knows the operation is done.

6. Return Results to the Component

Finally, the hook returns { data, loading, error }, giving the component everything it needs to render UI accordingly (loading spinner, data display, or error message).

Step 2: Using the useFetch Hook

Now, let's see how we can use the useFetch custom hook in a React component.

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

  if (loading) return <div>Loading...</div>;
  if (error) return Error: {error.message};

  return (
    <div>
      <h2>Fetched Data</h2>
      <p>{JSON.stringify(data)}</p>
    </div>
  );
};

Real-World Example: Fetching Data from an API

Let's consider a real-world scenario where you need to fetch data from an API using the useFetch custom hook.

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

export function App(props) {
  const { data, loading, error } = useFetch('https://dummyjson.com/test');

  if (loading) return <div>Loading...</div>;
  if (error) return <>Error: {error.message}</>;

  return (
    <div>
      <h2>Fetched Data</h2>
      <p>{JSON.stringify(data)}</p>
    </div>
  );
}

Final Thoughts

Custom hooks like useFetch in React provide a powerful way to encapsulate and reuse complex logic across components. By centralizing data fetching and state management, custom hooks promote code reusability and maintainability in frontend applications.

Start leveraging custom hooks in your React projects to streamline your development process and enhance code quality.