React Hooks: ¿Qué son y cómo funcionan?

Introducción

En este artículo, aprenderemos qué son los React Hooks y cómo funcionan.

Si eres una persona con poca o mucha experiencia en el desarrollo de aplicaciones web con React, es muy probable que hayas utilizado componentes de función (function components) y también hayas necesitado cambiar los estados de algunas aplicaciones.

En este artículo, analizaremos una forma de controlar los estados de una aplicación a través de los componentes funcionales.

¿Qué son los React Hooks? ¿Cómo funcionan?

Hasta la versión 16.7 de React, solo era posible acceder a algunas funcionalidades a través de clases (como, por ejemplo, el lifecycle). Apesar de la posibilidad de crear componentes a partir de funciones, hasta esta versión solo recibían propiedades y no podían acceder a todas las funcionalidades de React, como lo hacían con las clases.

En la versión 16.8 de React se lanzaron hooks, que permiten utilizar varios recursos de forma sencilla a través de funciones. También ayuda a organizar la lógica utilizada dentro de los componentes.

Dentro de nuestra rutina de desarrollo, una tarea común es la creación de un portafolio para mostrar nuestras habilidades a posibles reclutadores, amigos o incluso para que la gente pueda tener un historial de nuestra evolución como desarrolladores.

Normalmente, ponemos nuestros proyectos dentro de GitHub; sin embargo, si queremos crear nuestro sitio web para mostrar estos proyectos, ¿cómo lo haríamos?

En nuestro proyecto con React, tendremos un componente que será responsable de listar nuestros repositorios de GitHub. Nos gustaría tener una estructura como la siguiente:

import React from 'react';

function ListaDeRepositorios() {
  return (
   <ul>
    <li>Curso de Alura - HTML y CSS</li>
    <li>Curso de Alura - React</li>
    <li>Curso de Alura - Manipulando DOM con JS</li>
   </ul>
  );
}
export default ListaDeRepositorios;

Ya tenemos nuestra lista de repositorios, ¿de acuerdo? Pero si queremos agregar más repositorios, tendríamos que crear más <li> ya que nuestro código todavía es estático. ¿Cómo haremos para generar esta lista de forma dinámica?

Hook useEffect

Con nuestro componente creado, podemos empezar a agregar funcionalidades. Vamos a crear una aplicación que liste los repositorios de esta API. Cabe mencionar que el fetch de JavaScript genera efectos colaterales (deseados o no) en nuestro código, ya que es una operación de I/O(input/output).

La documentación oficial de React nos orienta sobre cómo lidiar con los efectos colaterales en nuestros componentes, por lo tanto, vamos a utilizar el hook useEffect para manejar estos efectos generados por el fetch(), como se muestra en el siguiente código:

import React, { useEffect } from 'react';
function ListaDeRepositorios() {
  useEffect(() => {
    async function cargarRepositorios () {
      const respuesta = await fetch('https://api.github.com/users/julio-cesar96/repos');
      const repositorios = await respuesta.json();
 return repositorios;
    }
    cargarRepositorios();
  }, []);

  return (
    <>
      ...
    </>
  );
}
export default ListaDeRepositorios;

El hook useEffect nos ayuda a manejar los side-effects (efectos colaterales) y también podemos usarlo como ciclo de vida del componente.

En el ejemplo anterior, el side-effect es llamado de API. Este hook recibe dos parámetros: el primero es una función que se ejecutará cuando el componente sea inicializado (puede ser asíncrona o no). En nuestro ejemplo, este primer parámetro es un arrow function asíncrona, que realiza una solicitud a la API y almacena la respuesta en la constante respuesta, en formato JSON, y la coloca en la constante repositorio. El segundo parámetro indica en qué situación el side-effect cambiará.

En nuestro caso, como queremos carga la lista solamente una vez, pasamos un array vacío [], porque garantiza la ejecución única (similar con la función componentDidMount()).

Ahora que ya estamos procesando los datos de la API, ¿cómo podemos generar una lista dinámica a partir de estos datos?

Hook useState

Con los datos de la API en manos, necesitamos almacenarlos en una lista y luego mostrarlos en pantalla, pero ¿cómo podemos hacerlo?

Vamos a pensar...

Utilizamos el hook useEffect para controlar los efectos secundarios de la solicitud HTTP fetch() que realizamos. Luego de la llamada, hay un cambio de estado dentro de nuestra aplicación, ya que ahora tiene datos de la API que antes no tenía. Para que podamos gestionar estos cambios de estado en nuestra aplicación, utilizamos el hook useState. Para lograrlo, utilizamos el hook de la siguiente manera:

import React, { useState } from 'react';
function ListaDeRepositorios() {
  const [repositorio, setRepositorio] = useState([]);
  …
 return (
    <>
      ...
    </>
  );
}
export default ListaDeRepositorios;

El useState, que permite la creación de estados en el componente a través de una función y maneja el estado local del componente, devuelve un array como resultado. Por lo tanto, es posible realizar una desestructuración para recibir partes de esta devolución. El array de retorno posee dos índices.

El primer valor de este array es una variable que almacena el estado en sí, a la cual llamamos repositorio. El segundo valor es una función, mediante la cual realizaremos las actualizaciones del valor de nuestro estado. Utilizamos setRepositorio para nombrar a nuestra función; el "set" viene antes del nombre debido a una convención de la comunidad.

Nuestra función setRepository se encarga de cambiar el estado del repositorio, por lo que necesitamos colocarlo dentro del alcance de la función useEffect, ya que esta última es la encargada de obtener los datos que modificarán el estado de nuestra aplicación. De esta forma, nuestra función useEffect quedará de la siguiente manera:

 useEffect(() => {
    async function cargarRepositorios () {
      const respuesta = await fetch('https://api.github.com/users/julio-cesar96/repos');
      const repositorios = await response.json();

      setRepositorio(repositorios);
    }
    cargarRepositorios();
  }, []);

La diferencia en esta función es que eliminamos el return repositorios y agregamos la función setRepositorios(), pasando como parámetro la constante repositorios. Como se mencionó anteriormente, esta función se encarga de actualizar el estado de nuestra aplicación.

Ahora que ya tenemos los datos de los repositorios provenientes de la API de GitHub y estamos actualizando el estado de nuestra aplicación con ellos, el último paso es mostrarlos dinámicamente dentro de la etiqueta ul, de la siguiente manera:

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

function ListaDeRepositorios() {
    ...
    return (
        <>
          <ul>
            {repositorio.map(repositorio => (
              <li key={repositorio.id}>
                {repositorio.name}
              </li>
            ))}
          </ul>
        </>
    );
}

Para lograr una generación dinámica, utilizamos el método map() para llamar a nuestro array repositorio, que contiene la lista de repositorios, e imprimirlos uno por uno en la pantalla.

La importancia de React Hooks

Los hooks permiten el uso de estados y otros recursos que antes solo eran posibles dentro de React a través de clases. A pesar de eso, los hooks son opcionales; depende de ti si los vas a usar o si sigues usando las clases.

Si quieres aprender más, aquí en Alura Latam, tenemos la Formación React JS, donde nos sumergimos aún más en el concepto de hooks y hablamos de todo el ecosistema de React.

¡Hasta la próxima!

Júlio César Brito da Silva

Apasionado por la educación y la tecnología, actúo como instructor y desarrollador en la Escuela Front End en Alura Brasil.