Hace unos días, durante la ReactConf, Sophie Alpert quien maneja el equipo de desarrollo de React en Facebook, y Dan Abramov, otro prominente miembro del core de React expusieron al mundo una nueva API para el desarrollo de componentes en React, los Hooks.
Qué es un Hook
La palabra Hook se traduce como Gancho en español, y la razón de que esta nueva API tenga este nombre, es que como indica la documentación, un Hook en react te permite "colgarte" o si buscaramos una mejor traducción sería algo como integrarte con el manejo de estado y los métodos del ciclo de vida de un componente, desde un componente funcional.
Recuerda que en React existen dos formas de declarar un componente, usando una clase y usando una función, esto nos permite diferenciar a ambos entre los componentes clase y los componentes funcionales.
Hasta el día de hoy, los componentes clase poseían habilidades que los componentes funcionales no tenían, principalmente la habilidad de conservar un estado, y la habilidad de definir acciones a realizar en el ciclo de vida de un componente, vía los métodos componentDidMount, componentDidUpdate entre otros más. Los hooks, proveen de una API que permite a los componentes funcionales manejar un estado, y definir lógica para el ciclo de vida de un componente.
Por qué los Hooks
Como explica Sophie Albert en su presentación durante la ReactConf 2018, existen 3 problemas que el equipo de React está buscando solucionar con los Hooks:
- Compartir y reutilizar lógica entre componentes
- Reducir el tamaño de componentes muy complejos
- Eliminar la confusión que las clases generan.
Estos son problemas identificados por la comunidad, en pocas palabras es complicado reciclar lógica entre componentes, algunos componentes pueden volverse verbosos y terminar conteniendo miles de líneas de código, y las clases no son tan amigables como pensábamos, son complicadas de entender para algunos programadores, especialmente por algunas características que las hacen particulares en JavaScript, y además, son complejas para algunas tareas de las computadoras como la optimización de código, minificación, etc.
Y aunque estos parezcan problemas independientes, Dan Abramov explica que en realidad son problemas que están relacionados entre sí y que seguramente dar solución a uno, puede significar dar solución a los 3. Aquí entran los Hooks.
Los hooks en funcionamiento.
Existen dos tipos de Hooks en React, los hooks del framework que vienen predefinidos y los hooks personalizados, que cada desarrollador puede crear para poder reciclar funcionalidad entre componentes.
Uno de los hooks del framework más populares y útiles es useState, por cierto, la convención para nombrar un Hook es usar la palabra use, seguida de un descriptor para el hook, como en este caso state porque a través de este hook podemos integrarnos con el manejo de estado del componente.
Para usar un Hook primero necesitamos un componente funcional, ojo, los hooks sólo funcionan con componentes funcionales y no con componentes clase:
import React from 'react';
function Demo(){
return(
<div>{name}</div>
)
}
Name es una propiedad de nuestro componente funcional que aún no definimos, pero que tiene la particularidad de ser variable y poder ser modificado, por lo que es parte del estado del componente, hasta antes de los hooks eso significaba que teníamos que migrar nuestro componente funcional a uno de clase, pero ya no más.
Para definir una propiedad del estado del componente con hooks usamos algo así:
const [name, setName] = useState('Uriel');
Las variables name y setName, contendrán el valor del estado y una función para modificar el estado respectivamente, estas variables son asignadas con el resultado de usar el hook useState, el valor que enviamos como argumento de useState es el valor por defecto para name.
A partir de aquí, cada modificación sobre name, será equivalente a lo que previamente hacíamos así:
this.setState({
name: 'Marcos'
})
Sólo que con hooks las modificaciones se hacen a través de la función que se envía como segundo elemento del arreglo resultado del hook, en este ejemplo setName
setName('Marcos');
Luego de cada modificación, React sabrá que tiene que realizar una actualización del componente, tal como siempre lo ha hecho cuando modificamos el estado del componente.
Además del hook de manejo de estado, React tiene otros hooks entre los que destacan:
- useEffect
- useContext
- useReducer
Entre muchos otros que puedes encontrar aquí: https://reactjs.org/docs/hooks-reference.html
Las limitantes de los hooks
Los hooks, aunque increíbles, vienen con sus propios limitantes. Por un lado, sólo puedes mandarlos a llamar en el cuerpo de la función, y no pueden llamarse dentro de condicionales, ciclos, o cualquier otra estructura que agregue un nuevo nivel de ejecución al componente:
import React from 'react';
function Demo(){
const [name,setName] = useState('Uriel'); // Correcto ✅
if(true){ const [counter,setCounter] = useState(0) // Incorrecto ❌ }
return(
<div>{name}</div>
)
}
La razón detrás de esta limitante es que, internamente, React usa el orden en que mandas a llamar tus hooks para saber cuál corresponde a cuál, por lo que el framework asume que tus hooks serán mandados a llamar en el mismo orden en cada ejecución del render de tu componente, cambiar esto podría traducirse en bugs.
Por otro lado, como mencioné antes, los hooks no pueden usarse dentro de componentes clase y son exclusivos de los componentes funcionales, ojo, eso no significa que los componentes clase vayan a ser reemplazados. De hecho, la documentación de React recomienda no reemplazar componentes complejos de clase, con componentes funcionales que usen hooks, por ahora se recomienda usarlos en pequeños componentes que nos ayuden a familarizarnos con el concepto.
Conclusión.
En general, el API de los Hooks luce increíble, habiendo desarrollado algunos años con React, puedo identificarme con algunos de los problemas que los Hooks resuelven, en general, se siente como algo muy útil y conveniente.
Sin embargo, como todo en la vida, no viene sin un precio, los Hooks se sienten como magia, algo que React mismo ha tratado de evitar, React es un framework explícito donde todo lo que sucede está expreso en el código, por lo que los Hooks parecen no alinearse tan claramente con esta filosofía, sin embargo, definitivamente son una solución muy creativa a varios problemas que sufre la comunida de desarrolladores.
Pronto tendremos contenido donde aprenderás a usar de manera prácitca los Hooks de React, aquí en CódigoFacilto, así que mantente al tanto y no dudes en suscribirte a nuestro canal para estar al pendiente de todo el contenido: https://youtube.com/user/codigofacilito