Hooks: Lo nuevo de React

En febrero hemos conocido la nueva versión de Reactjs v16.8.0 y con él, al fin, los anunciadísimos cambios de la React conf. Ésto es lo que vamos a ver en este artículo: un rápido vistazo a los nuevos cambios para que nadie se quede atrás. 

¿Qué son los Hooks y por qué molan tanto?

Los Hooks son una nueva funcionalidad de React que nos permite tener estado y flujos de vida que hasta ahora estaban reservados únicamente para las clases de ES6, sin la necesidad de usarlas.

Esto nos permitirá (entre otras muchas cosas), por ejemplo,  extraer toda la lógica de nuestros componentes para que puedan ser testeados (de forma independiente) y reutilizados. 

¿Tenemos que dejar de usar clases?

No, las clases van a seguir como están. Es más, como bien aconsejan desde React, no hay que volverse loco y migrar todo nuestro código. Advierten que intentemos evitar las grandes reescrituras y que, poco a poco, vayamos usándolos en nuestros nuevos componentes para cambiar de mentalidad y empezar a «pensar en Hooks«. 

Creo que no hay mejor forma de aprender algo que llevándolo a la práctica y es por esa razón que en este artículo vamos a crear unos mini proyectos utilizándolos, también puedes encontrar todos los ejemplos dentro del siguiente repositorio:

https://github.com/Javierif/Examples-Hooks

Hook State

Lo primero que nos encontraremos en hook es useState, que gracias a esta «magia» podremos tener estado dentro de nuestro componente que es puramente una función de javascript sin clases. Vamos a ver cómo lo utilizamos de una forma sencilla:

En primer lugar, lo que debemos de hacer es importar useState:

import React, { useState } from "react";

Una vez importado, podemos definir un nuevo elemento en el estado pasándole un valor por defecto de este componente de la siguiente forma: [nombre,asignador]=useState(valor).

const [attitude, setAttitude] = useState("feliz")

Tendremos a nuestra disposición tanto nuestro objeto del estado, como su setteador instanciados en una única línea sin necesidad de usar el setState, ni definirlo en ningún constructor.

Para poder apreciarlo mejor, expondremos dos ejemplos: por un lado, usando hooks y, por otro sin hooks:

Ejemplo sin Hooks:

Ejemplo con Hooks:

  

Hook Effects

Los efectos vienen a sustituir el flujo de vida de React como lo conocemos, useEffect() tiene la capacidad de hacer lo mismo que componentDidMount,  componentDidUpdate y el componentWillUnmount en una única función, pero no solo queda en eso, ya que tiene una gran cantidad de utilidades y realmente un effecto es un «watcher» suscrito (o no) a un objeto y que reacciona cuando cambia.

Al igual que con el Hook useState, tendremos que importar ahora también el useEffect:

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

Creamos nuestro “watcher” de la siguiente forma:

useEffect(función_a_ejecutar,elemento_vigilado).

Curiosamente si pasamos un array vacío en el elemento vigilado, entiende que no tiene que vigilar a nadie y solo se ejecutará una única vez (así es como el equipo de React recomienda sustituir el uso de componentDidMount y componentWillUnmount)

useEffect(() => {
  fetch("https://api.github.com/users/Encamina/repos")
  .then(response => response.json())
  .then(resp => setRepos(resp))
  .catch(err => console.log(err.message));
}, []);

A continuación, vamos a ver otros dos ejemplos sobre cómo realizar la misma funcionalidad, sin hooks y con hooks:

Ejemplo sin Hooks:

Ejemplo con Hooks:

CONCLUSIÓN

La nueva versión de React nos trae useState y useEffect. Realmente aunque sean solo dos funciones, nos abre un gran abanico de oportunidades de cómo utilizarlos.

En este artículo hemos acercarte los nuevos conceptos base que han introducido para que empieces a «pensar en hooks«. Te recomiendo que utilices este artículo simplemente como una base y amplíes conocimientos leyendo la web que ha creado el equipo de React sobre los Hooks, ya que entran en más profundidad en este tema.