Cómo hacer peticiones HTTP con useEffect en React
En React, useEffect es un hook que permite ejecutar efectos secundarios en componentes funcionales, como realizar peticiones HTTP. Para ello, generalmente se usa fetch o bibliotecas como Axios. A continuación, explicamos cómo hacerlo correctamente.
Usando useEffect para hacer peticiones HTTP
El hook useEffect se ejecuta después de que el componente se monta y puede configurarse para actualizarse cuando cambian ciertas dependencias. Para hacer una petición HTTP correctamente, es importante manejar el estado de carga y errores.
Ejemplo con fetch:
import { useState, useEffect } from "react";
function App() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => {
if (!response.ok) {
throw new Error("Error en la respuesta del servidor");
}
return response.json();
})
.then((data) => {
setData(data);
setLoading(false);
})
.catch((error) => {
setError(error.message);
setLoading(false);
});
}, []); // Dependencias vacías para ejecutar solo una vez al montar el componente
if (loading) return <p>Cargando...</p>;
if (error) return <p>Error: {error}</p>;
return (
<ul>
{data.map((item) => (
<li key={item.id}>{item.title}</li>
))}
</ul>
);
}
export default App;Ejemplo con Axios
Axios simplifica las peticiones HTTP al manejar automáticamente respuestas JSON y errores.
import { useState, useEffect } from "react";
import axios from "axios";
function App() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
axios
.get("https://jsonplaceholder.typicode.com/posts")
.then((response) => {
setData(response.data);
setLoading(false);
})
.catch((error) => {
setError(error.message);
setLoading(false);
});
}, []);
if (loading) return <p>Cargando...</p>;
if (error) return <p>Error: {error}</p>;
return (
<ul>
{data.map((item) => (
<li key={item.id}>{item.title}</li>
))}
</ul>
);
}
export default App;Consideraciones adicionales
-
Manejo de cancelación: Para evitar actualizaciones de estado en componentes desmontados, usa
AbortControllerconfetcho cancela solicitudes con Axios. -
Dependencias en
useEffect: Si la petición depende de una variable, inclúyela en el array de dependencias para actualizar los datos dinámicamente. - Uso de bibliotecas: Alternativas como React Query pueden simplificar el manejo de peticiones y caché.
Referencias
Jorge García
Fullstack developer