En este artículo, exploraremos cómo realizar llamadas fetch en React utilizando hooks, lo que nos brinda un mayor control sobre la espera de respuestas de las peticiones y una mejor gestión de errores.

Antes de sumergirnos en las llamadas fetch, es importante comprender qué son los hooks en React. Un hook es una función especial que permite a los componentes funcionales mantener su propio estado, lo que les permite replicar ciertos comportamientos de los componentes de clase. Los hooks más utilizados en React son useState, que mantiene el estado del componente, useEffect, que permite realizar acciones al montar, actualizar o desmontar el componente, y useCallback, que optimiza el rendimiento y evita cálculos costosos.

Sin embargo, React también nos permite crear nuestros propios hooks, conocidos como custom hooks, que combinan la funcionalidad de los hooks existentes para adaptarse a nuestras necesidades específicas.

En este artículo, propondremos una forma de manejar las solicitudes a servidores mediante un custom hook, donde podremos controlar si la petición está pendiente, si se ha completado y, en caso de error, capturarlo adecuadamente. Esta técnica nos proporciona una manera eficiente y flexible de realizar solicitudes de red en nuestras aplicaciones React, mejorando la experiencia del usuario y facilitando el manejo de errores.

import {useState, useEffect} from 'react'

export default function useFetch(url) {
    const [data, setData] = useState('')
    const [isLoading, setIsloading] = useState(false)
    const [error, setError] = useState(null)

    useEffect(()=> {
        try{
            setIsloading(true)
            const getfetch = async ()=> {
                const {data: fetchedData} = await fetch(url).then(res=> res.json())
                setData(fetchedData)
            }
            getfetch()
        } catch(err){
            setError(err)
        }
        finally {
            setIsloading(false)
        }
    },[])
    return {data, error, isLoading}
}

El código que vemos arriba muestra la creación de una función llamada useFetch, la cual actúa como nuestro hook personalizado. En las primeras líneas, se definen los tres estados necesarios para el funcionamiento del hook. El primero se utiliza para almacenar la información obtenida en la llamada, el segundo actúa como una bandera para indicar si la petición está en curso o si ha finalizado, y el último estado se utiliza para almacenar información en caso de error.

Una vez que se han definido los estados, el siguiente paso es el uso del hook useEffect, el cual ejecuta un bloque de código dentro de un try...catch. En primer lugar, establecemos el estado isLoading como verdadero para indicar que se está realizando la llamada. Luego, creamos una función asíncrona para realizar la solicitud fetch de manera síncrona y asignar el valor de la respuesta al estado data. En caso de que ocurra un error, el bloque catch se encarga de guardar el estado correspondiente de error. Finalmente, independientemente del resultado de la solicitud, el bloque finally vuelve a establecer la bandera isLoading como falsa, indicando que la solicitud ha finalizado. Este código nos proporciona un mecanismo robusto para realizar solicitudes de red en nuestras aplicaciones React, con la capacidad de manejar el estado de carga y los errores de manera eficiente.

despues del useeffect solo queda regresar los valores que queremos exponer fuera el hook, y la forma de hacerlo es regresar un objeto con valores que en este caso son data , isLoading y error

Aquí está la implementación del custom hook que creamos anteriormente:

export default function App() {
    const {data, isLoading, error} = useFetch('http://fakeApiRest')

    if(isLoading) {
        return <div>loading...</div>
    }
    if(error) {
        return <ErrorHandler error={error} />
    }
    return (
        <div>{data}</div>
    )
}

En este fragmento de código, llamamos al hook que creamos y recibimos un objeto que desestructuramos en tres variables: data, isLoading, y error. Luego, tenemos una condición que verifica si isLoading es verdadero, en cuyo caso se muestra un mensaje de carga. También hay una condición para manejar errores: si hay un error, se devuelve el componente ErrorHandler. Por último, si la llamada es exitosa, se muestra la información recibida en la petición. Esta implementación permite controlar el estado de carga y los errores de manera efectiva al realizar solicitudes de red en nuestra aplicación React.

esto es una fomra de hacer la implementacion de una llamada pero comenta tu como lo harias o que cambiarias o agregarias