useEffect y consumo de APIs

Clase 19 de 30 • Curso de React 17 con Webpack 5 y Sass

Clase anteriorSiguiente clase

Emanuel Catriquil

student•

Docs de la API 👉 https://api.escuelajs.co/docs/ API para desarrollo 👉 https://api.escuelajs.co/api/v1/

diego benitez

student•

este recurso ya no esta disponible

Juan Esteban Orozco Botero

student•

@skorpiion_dev sí está disponible.

Braulio Rivas Abad

student•

useEffect es una manera de que nuestro componente de React, puede recibir nueva info, re-renderizar o cambiar su contenido, cuando una función se haya completado. Es decir, podemos controlar el momento en el cual nuestro componente tome un cierto comportamiento. Por ejemplo, en situaciones como funciones asíncronas ⇒ setTimeout o asyn y await, fetch requests o manipulaciones del DOM. Veamos un ejemplo de como usar useEffect.

Pre-configuración

Instalar axios para realizar peticiones get, también instalar el plugin de babel para manejar el asincronismo

npm install axios
npm install @babel/plugin-transform-runtime

Editemos rápidamente .babelrc

{
	"presets": [
		"@babel/preset-env",
		"@babel/preset-react"
	],
	"plugins": [
		"@babel/plugin-transform-runtime"
	]
}

Ahora si veamos como funciona.

// ProductList.jsx
import React, { useEffect, useState } from 'react';
import ProductItem from '@components/ProductItem';
import axios from 'axios';

const API = 'https://api.escuelajs.co/api/v1/products';

const ProductList = () => {
	const [products, setProducts] = useState([]);

	useEffect(async () => {
		const response = await axios(API);
		setProducts(response.data);
	}, [])

	return (
		<section className="main-container">
			<div className="ProductList">
				{products.map(product => (
					<ProductItem />
				))}
			</div>
		</section>
	);
}

En el inicio estamos importando axios para las peticiones, y creando una constante API que será la necesaria para traer información de los productos

Analicemos el componente productList. Al inicio creamos la estructura inicial de estado, en la cual guardaremos los artículos que traeremos de nuestra API. Ahora, como indicamos, useEffect es muy útil para peticiones HTTP. Para ello, creamos la función anónima que usa useEffect. Por dentro creamos la función que usara async. Dentro creamos una constante llamada response a la cual creamos la petición y guadamos el resultado de la API. A continuación, usamos setProducts para poder guardar la información nueva en products, por eso por dentro le pasamos response.data. Lo más destacable viene ahora, en el momento que pasamos un segundo argumento a useEffect.

Maneras de usar useEffect

Array Vacío ⇒ ejecuta el callback solamente una vez, después de que el componente sea cargado en el DOM. Es decir, solamente cuando nuestro componente este cargado en el DOM, ejecutará la función por dentro SOLO UNA VEZ y nunca más

const ProductList = () => {
	const [products, setProducts] = useState([]);

	useEffect(async () => {
		const response = await axios(API);
		setProducts(response.data);
	}, [])
}

Sin argumentos ⇒ cuando usemos useEffect, pero sin segundo argumento, este ejecutará dicho callback cada vez que se re-rendirece en el DOM. Es decir, cada vez que cambie cualquier valor del componente, este callback siempre se ejecuta

const ProductList = () => {
	const [products, setProducts] = useState([]);

	useEffect(async () => {
		const response = await axios(API);
		setProducts(response.data);
	},)
}

Array con datos ⇒ este tipo se ejecuta solamente cuando un valor de prop o state de nuestro componente cambie. Es decir, imaginemos que existe un contador interno de clicks. Cada vez que el contador indique explicita mente que un valor del componente cambió, el callback de useEffect siempre se ejecutará.

const ProductList = () => {
	const [products, setProducts] = useState([]);

	useEffect(async () => {
		const response = await axios(API);
		setProducts(response.data);
	}, [props, state])
}

Tienen relación a la manera de anterior de componentes con clase

Usar la manera de array con datos o sin datos son equivalentes a componentDidUpdate o componentDidMount. Así como indica sus nombres ⇒

Si el componente se actualizó, este ejecuta un callback el cual tiene cierta función. Esta manera es igual a usar useEffect con un array con datos. Es decir, ¿hay nueva info? ⇒ realiza esto cada vez que la info nueva se actualice
Si el componente se cargó en el DOM, un callback será ejecutado y nunca más. Esta manera es igual a usar useEffect con un array sin datos. Es decir, ¿ya está cargado? ⇒ necesito que hagas esto y después te puedes quedar dormido

Luis Alejandro Vera Hernandez

student•

Muchas gracias por tus aportes, son muy interesantes y buenos

rodrigo Fierro

student•

MUCHISISISMAS GRACIAS , Por tu aporte me pude sacar una duda que traía de cursos anteriores

Diego Cortés Fuentes

student•

Es importante que si usan:

{products.map((product) => (
          <ProductItem />
        ))}

estén utilizando ( ) en la función para regresar el jsx, si usan { } deben utilizar la palabra return así:

{products.map((product) => {
          return <ProductItem />;
        })}

Luis Alejandro Vera Hernandez

student•

ahhh eso era, jaja muchas gracias

Fernando Molano Castrillón

student•

Me tenía loco esa parte y no entendía por qué no se me mostraban los productos. Gracias.

Perez Holvert

student•

para los que vienen del futuro poner async dentro del useEffect da un error y se puede solucinar así:

useEffect(() => { getData(); }, []);

const getData = async () => { const response = await axios.get(API); setProducts(response.data); console.log(response); };

Kenneth Angulo L

student•

Gracias por el dato, si, se genera un warning, aunque no rompe la aplicacion esta mal que dejemos esas alertas sin darle solucion.

Warning: useEffect must not return anything besides a function, which is used for clean-up.

It looks like you wrote useEffect(async () => ...) or returned a Promise. Instead, write the async function inside your effect and call it immediately:

En mi caso lo solucione asi, siguiendo la soucion que plantea react:

    useEffect(() => {
        async function fetchData() {
            const response = await axios.get(API);
            setProducts(response.data);
        }
        fetchData();
    }, []);

Mauricio Parada G

student•

si, aparentemente se delico ahora react con eso

Nicolas Estefan Lopez

student•

Actualmente el useEffect no puede retornar una promesa, por ende el codigo debe ser asi:

useEffect(() => {
		const getProducts = async () => {
			const response = await axios(API);
			setProducts(response.data);
		};
		getProducts();
}, []);

Magalí Acevedo

student•

gracias !!!!!

walter Jorge

student•

Gracias por el aporte funciona de 10 :) .

Emilia Margarethe Ericksson

student•

https://www.youtube.com/watch?v=_2hp91tJGpg Async & Await

Max Andy Diaz Neyra

student•

Buen aporte Emilia, muchas gracias

Ibáñez Márquez, Michael

student•

excelent

Daniel Rodriguez Davila

student•

Aqui los comandos compañeritos:

-npm i axios -npm install @babel/plugin-transform-runtime

Patrick Jhonatan Hernandez Blanco

student•

Hay algo que falto y que en React es importante, el key de cada elemento renderizado dentro del map =>

<div className="ProductList">
	{
		products.map( product => (
			<ProductItem key={ product.id } />
		))
	}
</div>

José Gregorio Estrada Meneses

student•

Desde 10:05 hasta 10:22 se filtra un sonido raro en el video, que miedo.

Obed Paz

student•

++useEffect es la forma en la manejamos el ciclo de vida de un componente++, en este caso nuestro componente contenedor que contiene otros componentes (los productos).

. Si alguna vez trabajaron con los metodos del ciclo de vida de un class component, entender esta siguiente imagen les abrira la mente a entender de una vez por todas useEffect.

. Abajo muestro un ejemplo de mi implementacion para este ejercicio:

César Palma

student•

se agradece la imagen de equivalencias aunque aun mas si estuviera en mayor resolución

Adriel Benjamin

student•

¿Por qué no utilizó Fetch en este caso? ¿Hay algúna desventaja usando Axios?

Seba Cardoso

student•

Axios usa XHR (Xml Http Request). Fetch es mas nuevo. No se si es una desventaja pero con fetch a diferencia de axios tenemos AbortController para abortar un request que hicimos y todavia no llego.

Carlos Britto Cañas

student•

me uno a tu pregunta, estaba esperando que usaramos fetch...

Jairo Jair Jasón Pozo Pérez

student•

Documentación de la API: https://api.escuelajs.co/docs/

Constante de la API:

const API = 'https://api.escuelajs.co/api/v1/products';

Luego declarar las variables para el useState

const [products,setProducts] = useState([]);

Tienen que instalar axios Documentación de axios: https://axios-http.com/docs/intro

npm install axios

Solicitud GET

useEffect(async ()=>{
	const response = await axios(API);
	setProducts(response.data);
},[])

Para recorrer el array de productos se usa el map

{products.map(product =>(
	<ProductItem />
))}

Jason Martinez

student•

También puedes utilizar esta API https://fakestoreapi.com/

Walter Andrei Arriaza Flores

student•

Muchas gracias Jason.

Cesar luis Espinoza Marroquin

student•

Gracias :D

Gabriel Bracamonte

student•

Ey Oscar el termo de JavaScript que tenias en el escritorio de atras ya no está :(

jose zuñiga

student•

Si están usando React18 o >, useEffect no puede retornar promesas y al renderizar componentes mediante una ciclo usando map les pedirá usar un id. Pueden usar este código.

El id se genera de manera automatica con el valor de la iteración. No es recomendable hacerlo así pero por ahora esta bien usarlo.

import React from 'react';
import { useEffect, useState } from 'react';
import {ProductItem} from '../components/ProductItem';
import '../styles/ProductList.scss';
import axios from 'axios';

const API = 'https://api.escuelajs.co/api/v1/products';

export const ProductList = () => {
	const [products, setProducts] = useState([]);

	useEffect(() => {
    getProducts()
  }, [])

  const getProducts = async () =>{
    const response = await axios(API);
    setProducts(response.data);
  };


  return (
    <section className="main-container">
			<div className="ProductList">
				{products.map((product, id)=>					
					<ProductItem key = {id}/>
				)}
			</div>
		</section>
	);
}

Nicolas Aguirre Yacup

student•

npm install axios
npm install @babel/plugin-transform-runtime

Pedro Alvarado Garcia

student•

Podríamos decir que en está clase vimos levemente como integrar backend con frontend.

Manuel Valencia Londoño

student•

Es importante mencionar que existe un efecto llamado useLayoutEffect, todo el código que contiene se ejecuta una vez sea renderizado el componente. A diferencia de useEffect el cual se ejecuta justo antes del render. 😀💚

David Castro

student•

Gracias!

FERNANDO ALBERTO RAMOS MARTINEZ

student•

A mi me funciona sin instalar @babel/plugin-transform-runtime, será porque uso React 18?

Moises Navarro

student•

estoy usando react 17, y no tuve que instalar ese plugin, debe ser una nueva version de babel que estas usando o alguna otra dependencia que este actualizada si alguien me lee, podria explicarnos porque no nosotros no hemos necesitado descargar este plugin antes comentario por Fernando ?

Schneider Adalith Correa Alvarado

student•

Si por alguna razón no le lista los productos es mejor leer la API con fetch.

const obtenerDatos = async () => {
		const data = await fetch(API);
		const productos = await data.json();
		setProducts(productos)
	}

Camilo Pimentel

student•

Igual no sigue apareciendo los items.!

useEffect y consumo de APIs

Introducción a React

¿Qué es React.js?

Conceptos fundamentales de React

Configurando el entorno de desarrollo para React

Análisis de dependencias en proyectos de React

Instalación de React y React DOM

Configuración de Webpack y Babel

Cambios en tiempo real con Webpack

React con CSS y Sass

Maquetación en React

Transformando HTML y CSS en componentes de React

Estilos en los componentes de React

Páginas, rutas y componentes

React Router DOM

Navegación entre rutas

Header en todas las rutas

¿Qué es Atomic Design? Conoce los beneficios

Solución al reto: componentes y rutas de React Shop

Tipos de componentes en React: stateful vs. stateless

Imágenes y alias en Webpack

Lógica con React Hooks

React.useState

Toggle del menú

useEffect y consumo de APIs

Custom Hooks para la tienda

useRef y formularios

React Context

Completando el carrito de compras

Orden de compra

Calculando el precio total

Eliminando productos del carrito

Deploy

Cómo comprar tu dominio y conexión con Cloudflare

Automatizando el despliegue con GitHub Actions

Próximos pasos

Retos de React.js (bug hunters)

Continúa con el Curso Práctico de Next.js