In React, hooks are functions that let you "hook into" React state and lifecycle features from function components. While React provides several built-in hooks like useState and useEffect, you can also create your own custom Hooks to extract component logic into reusable functions.

Why bother creating custom Hooks?

Reusability: Share logic across multiple components without repeating code (DRY principle).
Readability: Simplify complex components by abstracting logic into well-named hooks.
Testability: Custom Hooks are just JavaScript functions, making them easier to test in isolation.

In this tutorial, we'll build a common and incredibly useful custom hook: useFetch. This hook will handle the logic for fetching data from an API, managing loading states, and catching errors. Let's dive in!

Setting Up Your Custom Hook File

First, we need a place for our hook to live. It's a common convention to store custom hooks in a hooks directory within your src folder.

Create a new file named useFetch.js (or useFetch.ts if you're using TypeScript) inside src/hooks/.

The use prefix is a crucial convention for custom Hooks. It tells React and other developers that this function follows the rules of Hooks (e.g., only call Hooks at the top level).

Importing Essential React Hooks

Our useFetch hook will need a couple of built-in React hooks to manage its internal state and handle side effects:

useState: To store the fetched data, the current loading status, and any potential error messages.
useEffect: To perform the actual data fetching (which is a side effect) when the component using the hook mounts or when the API URL changes.

Open your useFetch.js file and add these imports at the top:

import { useState, useEffect } from 'react'

Defining the useFetch Hook Signature

Now, let's define the basic structure of our custom hook. It will be a function that accepts an API url as its primary argument.

export const useFetch = url => {
  // Hook logic will go here
}

We export the function so we can import and use it in our components. This hook will eventually return an object containing three pieces of information: the data fetched, a loading boolean, and an error object if something goes wrong.

Managing State Inside the Hook

A key responsibility of useFetch is to manage the different states involved in a data fetching operation. We'll use useState for this:

export const useFetch = url => {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true) // Or false, and set to true in useEffect
  const [error, setError] = useState(null)

  // ... rest of the hook logic
}

Explanation: State Variables

data: This will hold the actual data fetched from the API. We initialize it to null because we don't have any data when the hook first runs.
loading: This boolean tells us if the data fetching is currently in progress. It's common to start with loading as true (if fetching starts immediately) or false and then set it to true right before the fetch begins in useEffect. For this guide, we'll refine this in the next step.
error: If the fetch fails, this state will store the error object or message. It's initialized to null.

Fetching Data with useEffect

This is where the magic happens! We'll use the useEffect hook to perform the data fetching. useEffect is designed for side effects like API calls, subscriptions, or manually changing the DOM.

export const useFetch = url => {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(false) // Initialized to false
  const [error, setError] = useState(null)

  useEffect(() => {
    // If no URL is provided, don't do anything
    if (!url) return

    // Used to prevent state updates on an unmounted component
    const controller = new AbortController()
    const signal = controller.signal

    // Reset states and start loading
    setLoading(true)
    setError(null)
    setData(null) // Optional: clear previous data

    fetch(url, { signal }) // Pass the signal to the fetch request
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`)
        }
        return response.json()
      })
      .then(fetchedData => {
        setData(fetchedData)
        setError(null) // Clear any previous error
      })
      .catch(err => {
        // Only update state if the error is not an AbortError
        if (err.name !== 'AbortError') {
          setError(err.message)
          setData(null) // Clear data on error
        }
      })
      .finally(() => {
        // Only set loading to false if the fetch wasn't aborted
        // This check might be redundant if AbortError is caught correctly
        if (!signal.aborted) {
          setLoading(false)
        }
      })

    // Cleanup function: This runs when the component unmounts or before the effect runs again
    return () => {
      controller.abort() // Abort the fetch request
    }
  }, [url]) // Dependency array: Re-run effect if url changes

  // ... return statement
}

Explanation: useEffect and Fetch Logic

Dependency Array [url]: useEffect takes a function as its first argument and a dependency array as its second. This array tells React to re-run the effect function only if any of the values in the array have changed since the last render. In our case, if the url prop changes, we want to fetch data again.
Guard Clause: if (!url) return; ensures we don't try to fetch if no URL is provided.
AbortController: This is a modern browser API used to abort asynchronous operations, like fetch.
- We create an AbortController and get its signal.
- This signal is passed to the fetch options.
- The cleanup function returned by useEffect calls controller.abort(). This is vital: if the component using this hook unmounts while a fetch is in progress, or if the url changes triggering a new fetch, the previous fetch request will be cancelled. This prevents errors like trying to update state on an unmounted component and avoids potential race conditions.
Resetting State: Before each new fetch, we set setLoading(true) to indicate the process has started. We also clear any previous error and optionally previous data.
Fetch Call: We use the browser's fetch API.
Response Handling:
- We check response.ok. If it's not, an error is thrown.
- response.json() parses the response body as JSON.
Success: If the fetch is successful, setData(fetchedData) updates our state with the new data and setError(null) clears any old errors.
Error Handling: The .catch(err => ...) block handles any errors during the fetch (network issues, parsing errors, or the error we threw for a bad HTTP status). We only set the error state if it's not an AbortError (which occurs when we intentionally cancel the fetch).
.finally(): This block always executes, whether the fetch succeeded or failed. We use it to set setLoading(false), but only if the operation wasn't aborted.
Cleanup Function: return () => { controller.abort(); }; This function is executed by React when the component unmounts or before the effect runs again due to a dependency change. It's essential for preventing memory leaks and unwanted behavior.

Returning State from the Hook

Our hook has done its job of fetching and managing state. Now, it needs to provide this information to the component using it.

export const useFetch = url => {
  // ... (useState and useEffect logic from above)

  return { data, loading, error }
}

We return an object containing data, loading, and error. This allows components to easily destructure these values.

Putting It All Together (Complete Hook Code)

Here's the complete code for your useFetch.js custom hook:

import { useState, useEffect } from 'react'

export const useFetch = url => {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)

  useEffect(() => {
    if (!url) return

    const controller = new AbortController()
    const signal = controller.signal

    setLoading(true)
    setError(null)
    // setData(null); // Optional: decide if you want to clear data immediately

    fetch(url, { signal })
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`)
        }
        return response.json()
      })
      .then(fetchedData => {
        setData(fetchedData)
        setError(null)
      })
      .catch(err => {
        if (err.name !== 'AbortError') {
          setError(err.message)
          setData(null)
        }
      })
      .finally(() => {
        // Check signal.aborted to ensure we only setLoading(false)
        // if the request was not intentionally aborted.
        if (!signal.aborted) {
          setLoading(false)
        }
      })

    return () => {
      controller.abort()
    }
  }, [url])

  return { data, loading, error }
}

Using Your useFetch Hook in a Component

Now that our useFetch hook is ready, let's see how to use it in a React component.

Imagine you have a component that needs to display a list of users from an API like JSONPlaceholder.

// src/components/UsersList.js (or .jsx / .tsx)
'use client' // Add this if your component or hook uses client-side features

import React from 'react'
import { useFetch } from '@/hooks/useFetch' // Adjust path if needed

const UsersList = () => {
  const {
    data: users,
    loading,
    error,
  } = useFetch('https://jsonplaceholder.typicode.com/users')

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

  if (error) {
    return <p>Error fetching users: {error}</p>
  }

  if (!users || users.length === 0) {
    return <p>No users found.</p>
  }

  return (
    <div>
      <h2>User List</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            {user.name} ({user.email})
          </li>
        ))}
      </ul>
    </div>
  )
}

export default UsersList

Explanation: Using the Hook in a Component

Import useFetch: We import our custom hook.
Call the Hook: Inside the UsersList component, we call useFetch with the API endpoint.
Destructure State: We destructure data (aliased to users for clarity), loading, and error from the object returned by useFetch.
Conditional Rendering:
- If loading is true, we show a "Loading..." message.
- If error is present, we display an error message.
- If data (users) is available, we map over it to render the list.
- It's also good practice to handle the case where users might be null or an empty array even if there's no error.

Notice how much cleaner the UsersList component is! All the complex data fetching logic is neatly encapsulated within the useFetch hook.

Conclusion and Best Practices

Congratulations! You've successfully created and used a custom React hook for data fetching. By abstracting this logic, you can now easily fetch data in any component with a single line of code, keeping your components clean and focused on rendering.

Further Enhancements & Best Practices:

TypeScript: For larger applications, consider converting your hook to TypeScript to add type safety for the URL, returned data, and error objects.
Request Options: Extend useFetch to accept an options object for more complex requests (e.g., POST, PUT, headers).
Caching & Advanced Data Fetching: For more sophisticated needs like caching, automatic refetching, or pagination, libraries like SWR or React Query (now TanStack Query) are excellent choices. They often provide their own custom hooks that handle even more complexity for you.

Custom hooks are a powerful pattern in React development. Start looking for repetitive logic in your components – it might be a great candidate for a new custom hook!

Mastering Custom React Hooks: A Step-by-Step Guide to useFetch