Ejercicio: Crea un componente que obtenga datos de una API y los muestre. Usa useEffect para manejar la petición y limpiarla si es necesario.
Práctica: Comprende cómo usar useEffect en diferentes escenarios, como obtener datos, configurar suscripciones y limpiar recursos.
Paso 1: Configurar el Componente
Comienza creando un componente funcional básico en React.
const DataFetchingComponent = () => {
return(
<div>
<h1>Componente de Obtención de Datos</h1>
</div>
);
};
export default DataFetchingComponent;
Paso 2: Agregar estado para almacenar los datos
Necesitas una variable de estado para almacenar los datos obtenidos de la API. Usa el hook useState para esto.
import {useState} from 'react';
const DataFetchingComponent = () => {
const [data, setData] = useState(null); // Inicializa el estado para almacenar datos
return(
<div>
<h1>Componente de Obtención de Datos</h1>
</div>
);
};
export default DataFetchingComponent;
Explicación:
- useState(null) inicializa data con un valor de null.
- setData es la función que usarás para actualizar el estado de los datos.
Paso 3: Obtener datos con useEffect
Ahora usa el hook useEffect para obtener datos cuando el componente se monte.
import {useState, useEffect} from 'react';
const DataFetchingComponent = () => {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async() =>{
try{
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const result = await response.json();
setData(result);
} catch(error) {
console.error(`Error al obtener datos: ${error}`);
}
};
fetchData();
},[]); // La matriz vacía asegura que solo se ejecute una vez al montar el componente.
return(
<div>
<h1>Componente de Obtención de Datos</h1>
</div>
)
};
export default DataFetchingComponent;
Explicación:
- useEffect(() => {}, []) ejecuta el código solo una vez cuando el componente se monta.
- fetchData es una función asíncrona que obtiene datos de la API dada.
- setData(result) actualiza el estado con los datos obtenidos.
Paso 4: Renderizar los datos obtenidos
Ahora que los datos están almacenados en el estado, muéstralos en tu componente.
import {useState, useEffect} from 'react';
const DataFetchingComponent = () => {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async() => {
try{
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const result = await response.json();
setData(result);
}catch(error){
console.error(`Error al obtener datos: ${error}`);
}
}
fetchData();
}, []);
return(
<div>
<h1>Ejemplo de Obtención de Datos</h1>
{data ? (
<ul>
{data.map((item, idx) => (
<li key={idx}>{item.title}</li>
))
}
</ul>
) : (
<p>Cargando...</p>
)}
</div>
);
};
export default DataFetchingComponent;
Explicación:
- data ? (...):(...) → Operador ternario para mostrar los datos o un mensaje de "Cargando...".
- data.map((item, idx) => ...) → Itera sobre la matriz de datos obtenidos y muestra cada elemento en una lista.
Manejo de limpieza (si es necesario)
En algunos casos, podrías necesitar limpiar efectos secundarios, como suscripciones o temporizadores. En este caso, no es necesario porque no hay suscripciones en curso.
import {useState, useEffect} from 'react';
const DataFetchingComponent = () => {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async() => {
try{
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const result = await response.json();
setData(result);
}catch(error){
console.error(`Error al obtener datos: ${error}`);
}
}
fetchData();
// Función de limpieza (no necesaria aquí)
return () =>{
// Lógica de limpieza (ej. cancelar suscripciones, limpiar temporizadores, etc.)
}
}, []);
return(
<div>
<h1>Ejemplo de Obtención de Datos</h1>
{data ? (
<ul>
{data.map((item, idx) => (
<li key={idx}>{item.title}</li>
))}
</ul>
) : (
<p>Cargando...</p>
)}
</div>
);
};
export default DataFetchingComponent;
Conceptos Clave
✅ useEffect: Esencial para manejar efectos secundarios en componentes funcionales, como obtener datos. Se ejecuta en el montaje, en actualizaciones o en el desmontaje según la matriz de dependencias.
✅ useState: Maneja el estado local del componente, permitiendo que sea reactivo a cambios.
✅ Renderizado Condicional: Muestra diferentes estados (cargando, error, éxito) con lógica condicional.
Puedes encontrar este ejemplo con TypeScript en mi GitHub. 🚀
