Let’s Create a Custome Hook called useGetSingleData

Fetching data in React components is a common task but doing it the wrong way can lead to unnecessary complexity, repetition, and maintenance nightmares. If you've ever found yourself writing the same useEffect and fetch logic in multiple components, dealing with messy error handling, or struggling with re-fetching data, then this article is for you.

The Problem: Repetitive and Unmanageable Data Fetching

Many developers start by directly fetching data inside React components like this:

function ItemDetails({ id }: { id: string }) {
  const [item, setItem] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    async function fetchData() {
      setLoading(true);
      try {
        const response = await fetch(`https://api.example.com/items/${id}`);
        const data = await response.json();
        setItem(data);
      } catch (error) {
        console.error("Error fetching item:", error);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, [id]);

  return loading ? <p>Loading...</p> : <div>{item?.name}</div>;
}

While this approach works, it has several issues:

• Code Duplication: Every component fetching data needs similar logic.

• Messy Components: Mixing data fetching with UI logic reduces readability.

• Error Handling Overhead: Handling errors in multiple places is tedious.

• Re-fetching Challenges: No built-in way to refresh data.

The Solution: A Reusable Custom Hook

By moving the data fetching logic into a custom hook, we solve these problems. Here’s how we can do it with useGetSingleData:

import { useCallback, useEffect, useState } from "react";
import { OtherItemModel } from "../model/OtherItemModel";
import { extractErrorMessage } from "../utils/extractErrorMessage";
import axiosClient from "../axiosClient";

export default function useGetSingleData(id: string | undefined) {
  const [singleData, setSingleData] = useState<OtherItemModel | null>(null);
  const [loading, setLoading] = useState<boolean>(false);

  const loadData = useCallback(async () => {
    if (id) {
      setLoading(true);
      try {
        const response = await axiosClient.get(`other-items/${id}/`);
        setSingleData(response.data);
      } catch (error) {
        extractErrorMessage(error);
      } finally {
        setLoading(false);
      }
    }
  }, [id]);

  useEffect(() => {
    const controller = new AbortController();
    loadData();
    return () => controller.abort();
  }, [loadData]);

  return {
    singleData,
    loading,
    refreshData: loadData,
  };
}

Why This is a Game-Changer

✅ Encapsulation & Clean Code

Instead of cluttering your components with useEffect and state logic, this hook centralizes data fetching, making components easier to read and maintain.

✅ Reusability & Scalability

Need to fetch different items in multiple components? Just reuse useGetSingleData instead of duplicating logic.

✅ Improved Error Handling

Errors are processed consistently inside the hook, reducing error-handling redundancy in components.

✅ Easy Data Refreshing

The refreshData function allows re-fetching data without complex state management.

How to Use useGetSingleData

import useGetSingleData from "../hooks/useGetSingleData";

function ItemDetails({ id }: { id: string }) {
  const { singleData, loading, refreshData } = useGetSingleData(id);

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

  return (
    <div>
      {singleData ? (
        <>
          <h1>{singleData.name}</h1>
          <p>{singleData.description}</p>
          <button onClick={refreshData}>Refresh</button>