Antes de comenzar esta publicación, recuerden que el Hook useEffect de react está disponible a partir de la versión 16.8 de React.
Primero les recomiendo que lean la documentación oficial para saber un poco más de sus características y también si quieren profundizar aún más sobre useEffect, les recomiendo que lean la publicación de nuestro profeta y mesías Dan Abramov que hizo en su blog Overreacted
Comencemos 🙂
En este ejemplo crearemos un componente que haga una petición a un API para obtener una lista de usuarios y lo guardaremos en un estado, así de simple.
Primero creamos un componente funcional e importamos useState y useEffect
- useState nos servirá para guardar la lista de usuarios obtenida desde el API en un estado.
- useEffect nos servirá para hacer la llamada al API después que se haya montado el componente(sí, useEffect es como el componentDidMount).
import React, { useState, useEffect } from 'react'
const Users = () => {
// la variable listUsers contendrá el array de usuarios
// la función setUsers se utilizá para actualizar el estado de listUsers
// el estado inicial de listUsers es un array vacío
const [listUsers, setUsers] = useState([])
useEffect(() => {
// Desde aquí llamaremos al API
}, [])
return (
<div>
Usuarios
</div>
)
}
export default Users
Ahora lo que haremos será crear una función asíncrona que haga la llamada al API y luego guarde el resultado en el estado listUsers, vamos a llamarla fetchDataUsers e invocarla dentro de useEffect.
// creo una función asíncrona
const fetchDataUsers = async () => {
/*
voy a usar un try catch para detectar posibles
errores al comunicarme con el API
*/
try {
/*
hago un fetch tipo GET al API de randomuser y uso
await para esperar a que termine la solicitud
antes de ir a la otra linea
*/
const response = await fetch('https://randomuser.me/api/?results=10')
/*
una ves que ha cargado la solicitud y se guardó
en la variable response, obtengo los datos en
formato JSON
*/
const data = await response.json()
// finalmente guardo los resultados en el estado con la función setUsers
setUsers(data.results)
} catch (err) {
// en caso exista un error lo muestro
throw new Error(err)
}
}
// llamamos a fetchDataUsers desde useEffect
useEffect(() => {
fetchDataUsers()
}, [])
Luego modificaremos un poco el return para que muestre a los usuarios cuando el array no está vacío.
<div>
{
users.length > 0 && users.map((e) => (
<div key={e.cell}>
{e.name.first}
</div>
))
}
</div>
Todo este código sin los comentarios quedaría de la siguiente manera.
import React, { useState, useEffect } from 'react'
const Users = () => {
const [listUsers, setUsers] = useState([])
const fetchDataUsers = async () => {
try {
const response = await fetch('https://randomuser.me/api/?results=10')
const data = await response.json()
setUsers(data.results)
} catch (err) {
throw new Error(err)
}
}
useEffect(() => {
fetchDataUsers()
}, [])
return (
<div>
{
listUsers.length > 0 && listUsers.map((e) => (
<div key={e.cell}>
{e.name.first}
</div>
))
}
</div>
)
}
export default Users
Lindo no?
También aquí les dejo una imagen para que comparen la nueva versión y la antigua versión.