custom fetch hook
Tags: react, hooks, beginners
Published: 2024-03-13 01:47:18

---
title: custom fetch hook 
published: true
description: se propone una solucion para hacer llamdas fetch desde un custom hook
tags: #react #hooks #beginners
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-03-13 00:38 +0000
---

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.

```javascript
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:

```javascript
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