useFetch a custom React Hook

Making HTTP requests in React applications is a common task, but it's not always an easy one. With numerous options available, such as Axios and Fetch, choosing the right approach can be challenging. To streamline this process, I present the custom React Hook useFetch, an elegant solution for handling HTTP requests in a simple and reusable manner in your projects.

State Management:

To begin with our Hook, we create states to control data loading and potential errors. Using React's useState, we define the states data, isLoading, and error.

const [data, setData] = useState();
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<Error | undefined>();

The data State:

The data state stores the data received from the API. It's initialized as undefined and updated when the request succeeds. You can also choose to initialize data with a default value if desired. Furthermore, you can define the expected data type for data.

The isLoading State:

isLoading is a boolean indicating whether the request is in progress. It's false by default and switches to true during the request, returning to false when it's completed.

The error State:

The error state stores potential errors that may occur during the request. It's initialized as undefined and updated with an Error object in case of an error.

The fetchData Function:

The fetchData function is responsible for making the request to the API. It's an asynchronous function that uses JavaScript's fetch method. In the try block, we make the request and parse the response into a JSON object. Any errors are caught in the catch block and stored in the error state. Finally, the isLoading state is updated to false in the finally block.

async function fetchData() {
  setIsLoading(true);
  try {
    const response = await fetch(url).then((res) => res.json());
    setData(response);
  } catch (error) {
    setError(error as Error);
  } finally {
    setIsLoading(false);
  }
}

Using useEffect:

To perform the request to the API, we use React's useEffect. We pass the fetchData function as the first argument and the url dependency as the second argument. This ensures that the request is made whenever the url changes.

useEffect(() => {
  fetchData();
}, [url]);

The refetch Function:

The refetch function is a way to redo the request to the API manually. It's called when we want to update the data, such as when the user clicks on a reload button.

function refetch() {
  setIsLoading(true);
  fetchData();
}

Complete Code

Here's the complete code for our custom React Hook useFetch:

import { useEffect, useState } from 'react';

export default function useFetch(url: string) {
  const [data, setData] = useState();
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<Error | undefined>();

  async function fetchData() {
    setIsLoading(true);
    try {
      const response = await fetch(url).then((res) => res.json());
      setData(response);
    } catch (error) {
      setError(error as Error);
    } finally {
      setIsLoading(false);
    }
  }

  useEffect(() => {
    fetchData();
  }, [url]);

  function refetch() {
    setIsLoading(true);
    fetchData();
  }

  return { data, isLoading, error, refetch };
}

Using the Hook

Now that the Hook is ready, you can use it in any component of your application to make requests to the API. Simply import the Hook and call the useFetch function passing the API url as an argument.

import useFetch from './useFetch';

export default function List() {
  const { data, isLoading, error, refetch } = useFetch("YOUR_API_URL");

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    // Render your list with the received data
  );
}

Hook's Return

Finally, we return an object containing the data, isLoading, and error states, along with the refetch function. This allows us to use this Hook in different parts of the application to make requests in a simple and reusable way.

Conclusion

The custom React Hook useFetch simplifies the process of making HTTP requests in React applications. With a clear structure and well-defined functionalities, it enables more efficient and organized development. Try out useFetch in your next project and see how it can make your life much easier!

I hope this article has been helpful to you. If you have any questions or suggestions, please don't hesitate to reach out. Thank you for reading this far and until next time! 🚀