Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Byrontosh/FundamentosReact/llms.txt

Use this file to discover all available pages before exploring further.

useFetch is a custom React hook that encapsulates reusable data-fetching logic. Instead of writing fetch boilerplate in every component, you call useFetch() once to receive fetchDataBackend — a ready-to-use async function. Pass any URL to that function and it will fetch the resource, parse the response as JSON, and return the result. Any network or parsing error is caught internally and logged to the console, keeping your component code clean.

​
Import

import { useFetch } from '../customHook/useFecth'

​
Signature

function useFetch(): (url: string) => Promise<any>

​
Parameters

useFetch itself takes no parameters. The async function it returns accepts the following argument:
​
url
string
required
The fully-qualified URL to fetch. The endpoint must respond with a valid JSON body; the hook calls .json() on the raw Response object.

​
Return value

useFetch returns fetchDataBackend, an async function with the signature (url: string) => Promise<any>. When called, fetchDataBackend:
  1. Issues a fetch(url) request using the browser’s native Fetch API.
  2. Awaits the Response and calls .json() to deserialize the body.
  3. Returns the parsed JavaScript value (object, array, primitive, etc.).
  4. On any error — network failure, non-JSON body, etc. — logs the error to the console via console.log and implicitly returns undefined.

​
Full source

export function useFetch() {

  const fetchDataBackend = async (url) => {
    try {
      const request = await fetch(url)
      const response = await request.json()
      return response      
    } catch (error) {
      console.log(error)
    }
  }
  
  return fetchDataBackend
}

​
Usage example

The following example is taken from Cuarto.jsx, the Custom Hook concept page. It demonstrates calling useFetch to obtain fetchDataBackend and using it inside two separate event handlers to load data from different APIs into local state. 
import { useState } from "react"
import { useFetch } from "../customHook/useFecth"

const Cuarto = () => {
  
  const [products, setProducts] = useState([])
  const [memes, setMemes] = useState([])
  
  const fetchDataBackend = useFetch()

  const getDataProducts = async()=>{
    const products = await fetchDataBackend("https://fakestoreapi.com/products")
    setProducts(products)
    console.log(products)  
  }
  
  const getDataMemes = async()=>{
    const memes = await fetchDataBackend("https://api.imgflip.com/get_memes")
    setMemes(memes)
    console.log(memes)  
  }

  return (
    <>
      <h1 className="font-bold text-2xl">customHook</h1>

      <hr className="border-gray-400 mb-8"/>

      <ul className="list-disc pl-5">
        <li>
          Es un Hook que permite encapsular lógica reutilizable y que puede ser utilizado en cualquier componente.
        </li>
      </ul>

      <div className="flex justify-center mb-8 mt-8">

        <div className="w-120 border rounded-lg p-4 w-80 text-center">

          <h2 className="text-lg font-semibold mb-2 underline">Más información</h2>
          <p className="mb-3 text-left mb-4"></p>
          <pre>{JSON.stringify(products[3]?.title)}</pre>
          <pre>{JSON.stringify(memes.data?.memes[0]?.name)}</pre>
          
          <button className="bg-violet-700 text-white py-1 px-3 mx-1 rounded mt-4" onClick={getDataProducts}>Obtener Productos</button>
          <button className="bg-violet-700 text-white py-1 px-3 rounded" onClick={getDataMemes}>Obtener Memes</button>
        </div>

      </div>

    </>
  )
}

export default Cuarto
Errors thrown during the fetch — including network failures, CORS rejections, and invalid JSON bodies — are caught by the try/catch block inside fetchDataBackend and logged to the console with console.log(error). In these cases the function returns undefined. Your component should guard against an undefined result before accessing properties on the returned value.

Build docs developers (and LLMs) love

Get started for freeTalk to us