React: código del custom hook «useFetch»

Uno de los hooks más utilizados y útiles es sin duda el de «useFetch», ya que te permite acceder a una API de forma fácil, simple y sin la necesidad de instalar dependencias.

Asimismo, con este hook ya no necesitarás crear estados para manejar promesas e implementar el useEffect dentro del componente, algo que dejará tu código mucho mucho más limpio y mantenible.

En cuanto a los estados que regresa esta función están: «data», «loading» y «error». Respecto a los parámetros de entrada también se incluye la opción de agregar cabeceras personalizadas y el body.

Actualización (marzo 2024)

Se realizaron cambios para permitir verificar el estado de la respuesta y agregar tokens y elementos de seguridad en la función.

Instrucciones

Uso con React.js sin frameworks

Se tiene que copiar y pegar el código en cualquier archivo y listo, solo hay que llamar la función dentro del componente. No es necesario instalar alguna dependencia o librería externa.

Para dejar más límpio el código, lo recomendable es guardarlo en en un archivo separado dentro de una carpeta de utilidades o hooks, ya que suele ser un hook que se utiliza mucho.

En el caso de que desees este componente con TypeScript, te recomendamos el siguiente hook que ya está adaptado.

Uso con Next.js

Es importante tener en cuenta que en las versiones mayores a la 13 de Next.js, este hook solo se podrá implementarse en componentes de tipo "use client". Si lo que buscas es usarlo en un componente de tipo servidor, prueba la opción nativa de fetch y suspense.

const useFetch = (string, header) => {
    const [data, setData] = React.useState(null)
    const [loading, setLoading] = React.useState(true)
    const [error, setError] = React.useState(null)

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

    const fetchData = async () => {
        try {
            const res = await fetch(url, header)
            const json = await res.json()
            setData(json)
        } catch (error) {
            setError(error)
        } finally {
            setLoading(false)
        }
    }

    return [data, loading, error]
}