Obtener datos al montar el componente
Obtenga JSON de una API dentro de useEffect, almacene la respuesta en el estado y active la obtención una sola vez con un array de dependencias vacío.
Obtener datos al montar el componente es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
El patrón de obtención de datos
El patrón estándar de React para obtener datos es: 1) definir el estado de carga, error y datos; 2) obtener los datos en useEffect con un array de dependencias vacío []; 3) actualizar el estado en la función de retorno de llamada; 4) renderizar según el estado.
Ejemplo completo
Un ejemplo completo que obtiene usuarios al montar el componente y gestiona los estados de carga y error.
interface User { id: number; name: string; email: string; }
function UserList() {
const [users, setUsers] = useState<User[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
fetch('/api/users')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => setUsers(data))
.catch(err => setError(err.message))
.finally(() => setLoading(false));
}, []);
if (loading) return <Spinner />;
if (error) return <ErrorMessage message={error} />;
return <ul>{users.map(u => <UserItem key={u.id} {...u} />)}</ul>;
}Uso de async/await en useEffect
La función de retorno de llamada de useEffect no puede ser async directamente, ya que devolvería una Promise que React interpretaría como una función de limpieza. En su lugar, defina una función async interna y llámela inmediatamente.
useEffect(() => {
async function fetchUsers() {
try {
const res = await fetch('/api/users');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
setUsers(data);
} catch (err) {
setError((err as Error).message);
} finally {
setLoading(false);
}
}
fetchUsers();
}, []);Comprobación del estado de la respuesta
fetch no genera una excepción ante errores HTTP, como 4xx o 5xx; solo lo hace ante fallos de red. Compruebe siempre response.ok y genere manualmente una excepción para las respuestas de error.
const res = await fetch('/api/data');
if (!res.ok) {
// Could also use res.status for specific handling
throw new Error(`Server responded ${res.status}: ${res.statusText}`);
}
const data = await res.json();Obtención de datos cuando cambia una dependencia
Añada la dependencia, como un ID de los parámetros de la ruta o de las props, al array de dependencias del efecto. El efecto volverá a ejecutarse y obtendrá datos actualizados cada vez que cambie la dependencia.
const { userId } = useParams();
useEffect(() => {
if (!userId) return;
setLoading(true);
fetch(`/api/users/${userId}`)
.then(r => r.json())
.then(setUser)
.finally(() => setLoading(false));
}, [userId]);Solicitudes POST en los efectos
Los efectos también pueden enviar solicitudes POST/PUT/DELETE, pero normalmente estas se desencadenan mediante eventos, como el envío de un formulario o un clic en un botón, no mediante efectos de montaje. Reserve los efectos para cargar datos y use controladores de eventos para las mutaciones.
Hook personalizado useFetch
Extraiga el patrón de obtención de datos, carga y error en un hook personalizado para reutilizarlo en varios componentes.
function useFetch<T>(url: string) {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
setLoading(true);
fetch(url)
.then(r => { if (!r.ok) throw new Error(`${r.status}`); return r.json(); })
.then(setData)
.catch(e => setError(e.message))
.finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}Análisis seguro de JSON
Incluya siempre res.json() en un bloque try/catch: un JSON incorrecto genera un SyntaxError. El catch externo lo gestionará, pero conocer el origen facilita la depuración.
Configuración de la URL base de la API
No escriba las URL de la API directamente en el código. Use variables de entorno, como import.meta.env.VITE_API_URL, para la URL base. Cree un archivo api.ts central con un wrapper de fetch configurado.
const API_BASE = import.meta.env.VITE_API_URL;
async function apiFetch<T>(path: string): Promise<T> {
const res = await fetch(`${API_BASE}${path}`, {
headers: { 'Authorization': `Bearer ${getToken()}` }
});
if (!res.ok) throw new Error(`API error ${res.status}`);
return res.json();
}Cuándo pasar a React Query
Los patrones manuales de fetch funcionan en casos sencillos. Cuando necesite almacenamiento en caché, volver a obtener datos en segundo plano, paginación o mutaciones, pase a React Query (TanStack Query): gestiona todos estos patrones de forma fiable.
Mostrar un esqueleto de carga
En lugar de un indicador giratorio, muestre una interfaz de esqueleto que coincida con la forma del contenido cargado. Esto reduce el tiempo de carga percibido y evita los cambios de diseño.
Comprobación rápida
¿Por qué no puede hacer que la función de retorno de llamada de useEffect sea async directamente?
Resumen: obtención de datos en useEffect
Defina el estado de carga, error y datos. Obtenga los datos en useEffect con un array de dependencias vacío []. Defina una función async interna; no haga que la función de retorno de llamada sea async. Compruebe siempre res.ok. Añada la URL o el ID a las dependencias para obtener datos dinámicos. Extraiga el patrón en un hook personalizado useFetch para reutilizarlo. Considere TanStack Query para la obtención de datos en producción.
Preguntas frecuentes
¿La lección «Obtener datos al montar el componente» es gratis?
Sí — el texto completo de «Obtener datos al montar el componente» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Obtener datos al montar el componente»?
Obtenga JSON de una API dentro de useEffect, almacene la respuesta en el estado y active la obtención una sola vez con un array de dependencias vacío. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Obtener datos al montar el componente»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Fundamentos de useEffect: dependencias y limpieza
- Obtener datos al montar el componente
- Gestionar estados de carga y error
- AbortController para la limpieza