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.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *