Construir una tienda en React implica mucho más que mostrar un solo producto estático. Para dar vida a una lista de productos reales, necesitas conectar tu aplicación con una API externa, y ahí es donde useEffect se convierte en tu mejor aliado. Junto con useState y la librería Axios, puedes hacer peticiones HTTP, almacenar la respuesta en el estado y renderizar dinámicamente cada elemento.
¿Cómo funciona useEffect para consumir una API?
useEffect es un hook de React que permite ejecutar código con efectos secundarios dentro de un componente funcional. Recibe dos argumentos principales [02:52]:
- Una función anónima donde colocas la lógica que deseas ejecutar, como el llamado a una API.
- Un arreglo de dependencias que determina cuándo se vuelve a ejecutar esa función.
Cuando el arreglo de dependencias está vacío ([]), el efecto se ejecuta una sola vez al montar el componente. Más adelante, si necesitas que el efecto reaccione a cambios de un valor específico, basta con agregar ese valor dentro del arreglo para que React lo observe y vuelva a disparar la función.
¿Por qué combinar useEffect con useState?
Antes de hacer la petición, necesitas un lugar donde guardar la información que llegará. Para eso se utiliza useState [02:22]. En el componente ProductList se declara así:
javascript
const [products, setProducts] = useState([]);
products almacena el arreglo de productos que llega desde la API.setProducts es la función que actualiza ese estado con los datos recibidos.- Se inicializa como un arreglo vacío porque la respuesta de la API tiene esa estructura.
¿Cómo se realiza la petición HTTP con Axios?
Axios es una librería que simplifica las peticiones HTTP en JavaScript. Para instalarla dentro de tu proyecto ejecutas [03:43]:
bash
npm install axios
Después la importas en tu archivo:
javascript
import axios from 'axios';
Dentro de useEffect, la petición se construye con async/await para esperar la respuesta antes de continuar [04:08]:
javascript
useEffect(async () => {
const response = await axios(API);
setProducts(response.data);
}, []);
API es una constante definida en la parte superior del archivo con la URL del recurso.response.data contiene la información que devuelve el endpoint.- Al llamar
setProducts(response.data), el estado se actualiza y React vuelve a renderizar el componente con los nuevos datos.
¿Cómo se iteran los productos para mostrarlos?
Una vez que products tiene la información, se utiliza el método map para recorrer cada elemento y renderizar un componente por producto [04:48]:
javascript
{products.map(product => (
<ProductItem key={product.id} />
))}
Cada iteración genera una instancia de ProductItem, lo que reemplaza el elemento estático que se mostraba antes.
¿Qué hacer si async/await rompe la aplicación?
Un error frecuente al usar async/await dentro de proyectos configurados con Babel es un reference error que indica que cierto valor no está definido [05:28]. Esto ocurre porque Babel necesita un plugin adicional para transformar correctamente la sintaxis asíncrona.
Para solucionarlo instalas el plugin correspondiente [06:00]:
bash
npm install @babel/plugin-transform-runtime
Luego lo agregas a la configuración de Babel en la sección de plugins:
{
"plugins": ["@babel/plugin-transform-runtime"]
}
Con esta configuración, al volver a ejecutar npm run start, la aplicación compila sin problemas y muestra múltiples productos provenientes de la API [06:44].
¿Cómo controlar la cantidad de productos mostrados?
La API utilizada ofrece parámetros como limit y offset que permiten paginar los resultados [01:18]. Aunque en esta implementación inicial se traen todos los productos disponibles, es posible limitar la cantidad directamente desde la URL o, de forma programática, mostrar solo cinco, diez o los que necesites a partir del estado almacenado.
Entender la documentación de la API antes de consumirla es fundamental. Revisar los endpoints, los parámetros disponibles y la estructura de la respuesta te permite anticipar cómo organizar tu estado y evitar errores inesperados.
Si quieres profundizar en cómo personalizar la presentación de cada producto y crear tus propios custom hooks para reutilizar esta lógica, comparte tus dudas y avances en los comentarios.
