React - de Cero a Profesional

Manejo de Datos y APIs

Fetch API y Axios

Vamos a adentrarnos en cómo React puede interactuar con el mundo exterior a través de solicitudes HTTP, un concepto crucial para prácticamente cualquier aplicación web moderna. Piensa en tu aplicación React como un restaurante y los datos que necesita como los ingredientes que se deben pedir y recibir desde diferentes proveedores (APIs o back-ends). Para hacer estos pedidos, podemos usar dos herramientas populares: Fetch API y Axios. Ambas son como los mensajeros que van y vienen trayendo lo que necesitas para cocinar tus platillos (mostrar datos en la aplicación).

Fetch API

Fetch API es parte del navegador y permite realizar solicitudes HTTP de manera sencilla y eficiente. No necesitas instalar nada extra para usar Fetch si estás trabajando en un ambiente que soporte estándares modernos de navegador.

Ejemplo Básico con Fetch

Imagina que quieres obtener una lista de usuarios de una API. Aquí te muestro cómo podrías hacerlo:

				
					import React, { useEffect, useState } from 'react';

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/users')
      .then(response => response.json())
      .then(data => setUsers(data))
      .catch(error => console.error('Error fetching users:', error));
  }, []); // El array vacío asegura que la solicitud se haga una sola vez al montar el componente

  return (
    <div>
      <h1>Lista de Usuarios</h1>
      {users.map(user => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

export default Users;

Ventajas y Desventajas

  • Ventaja: Integrado en el navegador, no requiere dependencias externas.
  • Desventaja: Puede resultar un poco verboso para manejar casos como timeouts o intentos de reintento de solicitud.

Axios

Axios es una biblioteca de JavaScript que puedes instalar y que facilita la realización de solicitudes HTTP. Ofrece algunas características adicionales sobre Fetch, como la capacidad de cancelar solicitudes y una mejor experiencia de manejo de errores.

Instalación de Axios

				
					npm install axios

Ejemplo Básico con Axios

Usando el mismo ejemplo de la lista de usuarios, veamos cómo se haría con Axios:

				
					import React, { useEffect, useState } from 'react';
import axios from 'axios';

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('https://api.example.com/users')
      .then(response => setUsers(response.data))
      .catch(error => console.error('Error fetching users:', error));
  }, []);

  return (
    <div>
      <h1>Lista de Usuarios</h1>
      {users.map(user => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

export default Users;

Ventajas y Desventajas

  • Ventaja: Sintaxis más simple y directa, manejo automático de JSON, cancelación de solicitudes.
  • Desventaja: Requiere la instalación de una dependencia externa.

Cuándo Usar Fetch o Axios

  • Fetch: Si prefieres una solución nativa sin dependencias adicionales y estás dispuesto a escribir un poco más de código para ciertas funcionalidades.
  • Axios: Si necesitas características adicionales como cancelaciones, monitoreo de progreso de carga o si prefieres su API más simplificada.

Uso de useEffect para peticiones a APIs

¿Qué es useEffect?

useEffect es un Hook que permite ejecutar efectos secundarios en componentes funcionales. Los efectos secundarios son operaciones que pueden afectar otros componentes y no solo el que se está renderizando, como peticiones de datos, suscripciones, o manualmente cambiar el DOM de tu aplicación.

Cómo Usar useEffect para Peticiones a APIs

useEffect se utiliza comúnmente para realizar peticiones a APIs externas porque permite manejar operaciones que deberían ocurrir después de que el componente se haya montado y cada vez que se actualice, dependiendo de cómo configures sus dependencias.

Ejemplo Básico

Supongamos que quieres obtener datos de una API de usuarios y mostrarlos. Aquí te muestro cómo podrías estructurar eso con useEffect:

				
					import React, { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]); // Estado inicial vacío para los usuarios

  useEffect(() => {
    // Función para cargar los datos de los usuarios
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/users');
        const data = await response.json();
        setUsers(data); // Guarda los datos de los usuarios en el estado
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData(); // Llamada a la función de carga de datos
  }, []); // El array vacío asegura que la operación se realice una sola vez al montar el componente

  return (
    <div>
      <h1>Lista de Usuarios</h1>
      {users.map(user => (
        <p key={user.id}>{user.name}</p> // Renderiza la lista de usuarios
      ))}
    </div>
  );
}

export default UserList;

Detalles Importantes

  1. Manejo de Efectos: useEffect se ejecuta después de que el renderizado se completa, por lo que no bloqueará la visualización de la UI mientras la API se está llamando.
  2. Dependencias: El segundo parámetro de useEffect es un array de dependencias. Si dejas este array vacío, el efecto se ejecutará una sola vez después del primer renderizado, similar a componentDidMount en componentes de clase. Si agregas variables al array, el efecto se ejecutará cada vez que estas variables cambien.
  3. Manejo de Asincronía: Al trabajar con APIs, es probable que necesites manejar operaciones asincrónicas. Utiliza async y await dentro de una función declarada dentro de useEffect para manejar estas operaciones de manera elegante.

Consejos para un Código Seguro y Eficiente

  • Limpiar Efectos: Si tu efecto establece suscripciones o timers, asegúrate de retornar una función de limpieza para evitar fugas de memoria o comportamientos inesperados.
  • Manejo de Errores: Siempre incluye manejo de errores en tus peticiones a APIs para evitar que tu aplicación se rompa por errores no capturados.

Recursos