Madre mía que han salido los hooks de React y yo con estos pelos.
Espero que tengas ganas de juguetear con ellos tantas como tengo yo,
porque voy a crear una serie de vídeos donde te voy a explicar de qué tratan y cómo usarlos.
Y hoy empezamos con la introducción, así que no te lo pierdas.
Pues finalmente fue la versión 16.8 la que nos trajo los hooks,
una funcionalidad que lleva meses anunciada desde octubre de 2018 en la React Conf de Las Vegas,
y allí Dan Abramoff hizo una demo que nos puso los dientes largos.
Por si eres más de los que les gusta leer, que sepas que he escrito una serie de artículos en mi blog de midudev.com
donde hablo en detalles sobre ellos, pero si te gusta más el vídeo, pues quédate que te lo cuento.
¿Qué son los hooks?
Pues sencillamente una serie de métodos que podremos importar desde React
para hacer que nuestros componentes funcionales puedan disfrutar de todas las características
que hasta ahora solo podíamos usar en las clases.
Esto es, poder crear un componente con una función y que tenga, por ejemplo, un estado interno.
Para entender mejor todo esto, lo que vamos a hacer es ir a nuestro querido Code Sandbox
y crear un proyecto de React donde veremos un simple contador.
Lo primero que vamos a hacer nada más entrar en Code Sandbox es asegurarnos que la versión de React y React DOM
que estamos utilizando es la que tiene los hooks, porque si no, lo que nos va a ocurrir es que no nos va a funcionar.
Así que solo aseguraos de este paso.
Ahora que ya estamos seguros, lo que vamos a hacer es crear un componente con una clase.
Vamos a llamarle app, como el que estaba.
Vamos a extender desde la clase React.component y vamos a tener un estado inicial que va a ser el contador con un valor inicial a cero.
Vamos a añadir el método render porque si no, no funciona nuestro componente.
Este método render tiene que devolver los elementos que queremos que renderice nuestro componente de React.
Vamos a utilizar un div y dentro tendrá un span que lo que va a hacer básicamente es mostrar qué valor tiene nuestro estado local.
Que la primera vez que se renderice nuestro componente será cero.
Muy bien, ahora lo que queremos es poder actualizar este estado.
Cada vez que hagamos clic en el botón, vamos a incrementar el estado local del contador en 1 utilizando el método this.setState.
Vale, perfecto. Pues ya lo tenemos.
Ahora, cada vez que hacemos clic en el botón, pues veremos que el valor del estado se incrementa.
Y este cambio se refleja en la pantalla ya que React está volviendo a renderizar el componente.
Vale, sé que es un ejemplo muy tonto y muy sencillo, pero solo quiero introduciros a los hooks y creo que verlo en un ejemplo muy sencillo os puede ayudar a entenderlo y ver más fácilmente la diferencia.
Mientras os soltaba el rollo, he añadido otro botón que lo que hará es decrementar el contador.
De hecho, aquí podemos ver que todo funciona.
Ahora bien, vamos a eliminar este componente con una clase para pasarlo a un componente funcional, esto es, usando una función para crear el mismo componente.
Hasta ahora no podríamos porque tiene un estado local, pero gracias a los hooks lo vamos a poder lograr.
Vamos a ver cómo lo haríamos.
Primero creamos una función con el nombre de nuestro componente, en este caso app.
Ahora nos gustaría poder crearle un estado local.
¿Y cómo podemos hacerlo?
Pues utilizando el primer hook que vamos a conocer, useState.
Para usarlo lo importamos de la librería de React y tenemos que ejecutarlo dentro de nuestro componente.
Para ejecutarlo le tenemos que pasar un parámetro que va a ser el valor inicial de nuestro estado.
En este caso, habíamos dicho que nuestro contador tenía que empezar a cero, así que le vamos a pasar el valor cero.
Pero no termina aquí, porque claro, le decimos que use un estado.
Pero ¿cómo podemos leer el valor de este estado y cómo podemos actualizar el valor de este estado?
Pues bien, useState nos devuelve un array de dos posiciones.
La primera posición es el valor de nuestro estado.
Y la segunda posición tendrá un método que al llamarlo podremos pasarle como parámetro el nuevo valor del estado.
Ahora usándolo lo veremos más claro, no os preocupéis.
Para que nuestro componente funcional sirva de algo, debe devolver los elementos que queremos renderizar.
Primero creamos un div y dentro tendremos el span que nos indicaba el valor de nuestro estado.
Esta vez no tenemos que utilizar la palabra this para acceder al estado, sino que lo tenemos directamente disponible en la constante contador, así que lo utilizamos.
También vamos a añadir el botón para incrementar el valor del estado.
Usamos el elemento button y le pasamos un atributo onClick.
Esta vez la función en línea no llamará a this.setState, sino que usaremos directamente el método setContador.
Y le pasaremos el nuevo valor como parámetro, que en este caso es el valor del contador que tenemos más uno.
Para saber qué hace nuestro botón vamos a poner un texto que nos indique que va a incrementar el contador.
Y también vamos a crear otro botón que básicamente hará lo mismo, pero decrementando el contador.
Para eso nos vamos a copiar justamente el que ya tenemos creado.
Y lo único que vamos a hacer es cambiar cómo actualizamos el contador y el texto que tendrá nuestro botón.
Y con esto ya tenemos nuestro componente listo.
Ahora podemos tanto incrementar el contador como decrementarlo y veremos los cambios reflejados en la UI.
Así que felicidades, ya has usado tu primer hook de React.
Aquí podemos ver nuestro componente funcional utilizando un estado.
Fijaos bien, no tenemos ninguna clase por ningún lado y en una sola línea estamos consiguiendo que nuestro componente tenga un estado interno.
Para ello utilizamos el hook useState, le pasamos el valor inicial que es 0 y de él extraemos dos posiciones de una red.
La primera posición, el valor del estado interno.
La segunda posición, un método para actualizar el estado interno.
Y antes de irnos del editor solo me gustaría recordaros una de las mayores magias de los hooks.
Y es que no hemos tenido que utilizar la palabra this para acceder al estado de nuestro componente ni para actualizarlo.
Y hemos conseguido crear un estado utilizando una simple función.
Y si no lo has entendido muy bien, no te preocupes.
Porque pronto subiré otro vídeo más con más ejemplos sobre el hook useState.
Donde lo veremos con más detalle.
Ahora me gustaría explicaros rápidamente las tres razones por las que el equipo de React ha decidido crear los hooks.
La primera, la vamos a ver gracias al transpilador de código de Babel.
Y es que si usamos Babel para que convierta nuestro componente con una clase de React,
vemos la salida del archivo con el JavaScript compilado.
Y vemos que es bastante complejo y que tiene muchas líneas.
Y esto es porque Babel tiene que realizar muchas transformaciones.
Y porque el coste de ejecutar una clase es mayor que el de una función.
Y para verlo, ahora vamos a pegar la función.
Nuestro componente funcional para ver cómo lo transpilaría.
Y aquí lo tenéis, solo 26 líneas y sin la necesidad de generar código extra.
Y no solo creo que las máquinas lo entienden mejor.
Es que también los desarrolladores que no tendrán que preocuparse de usar la palabra disk,
que muchas veces es un quebradero de cabeza, sobre todo para la gente que está empezando.
Y otra razón la comento en mi artículo de midudef.com.
Y es que con los hooks vamos a poder reutilizar la lógica de nuestros componentes de forma mucho más sencilla.
Para conseguir eso, ha habido diferentes iniciativas a lo largo del tiempo en React.
Una fue la de los mixings, que si no la has conocido, mejor, porque ya están obsoletas.
Pero básicamente nos permitía inyectar comportamientos a nuestros componentes.
Más adelante se crearon los high order components, que básicamente eran funciones que devolvían componentes.
De esta forma podías de alguna forma utilizar esos componentes con diferentes props reutilizando la lógica desde esa función.
Y los high order components estaban muy bien, pero tenían el problema que no veíamos en nuestro componente
quién le estaba inyectando las cosas.
Y para eso se pensó en otra aproximación llamada render props,
que trataba de usar un componente que había que pasarle como children o como prop una función,
de forma que podíamos ver claramente en nuestro render de dónde aparecía esa información
y qué íbamos a renderizar con ella.
Librerías como React Apollo han utilizado con éxito esta solución.
¿Vale? ¿Y por qué toda esta chapa sobre la reutilización de la lógica en React?
Pues porque resulta que ahora con los hooks, como veremos más adelante en otro vídeo,
podremos compartir la lógica entre diferentes componentes, creando nosotros mismos tantos hooks como queramos.
Y esto nos lleva a la tercera característica, y es hacer que la lógica de nuestros componentes quede más recogida.
Cuando usábamos clases, dividíamos la lógica de nuestros componentes en diferentes ciclos de vida,
lo que hacía que teníamos cada temática muy dispersa.
Lo podemos ver en este vídeo con diferentes colores.
Pensad que la lógica puede ser fetching de datos, enviar tracking cada vez que se pinte nuestro componente,
suscribirse y desuscribirse a eventos, y cualquier cosa que se os ocurra.
Pero gracias a los hooks, podremos hacer que las diferentes temáticas o lógicas que tenemos que tratar en nuestros componentes
queden mucho más recogidos, y en este vídeo podéis ver la diferencia.
Vamos a verlo una vez más.
Primero, un componente basado en una clase.
Después, cómo quedarían las diferentes lógicas de nuestro componente, utilizando una función y utilizando hooks.
Y hasta aquí la introducción a los hooks de React, una nueva característica que promete.
Y antes de terminar, me gustaría deciros dos cosas.
Lo primero, los hooks son y serán totalmente compatibles con el código actual de React,
de forma que no hace falta que ahora te vuelvas loco a reescribir todo tu código por hooks.
Puedes dejar las clases por ahora, no pasa nada.
Y lo segundo, que este vídeo es solo una introducción de todo el potencial que tienen los hooks.
Si te han gustado, te recomiendo que te suscribas al canal, porque muy pronto voy a crear más vídeos al respecto.
En la siguiente entrega veremos con todo lujo de detalles uno de los hooks que seguro más usaremos,
el hook UseState.
Y vamos a ver todos los detalles, todo lo que necesitas saber sobre él.
Así que no te lo pierdas.