¿Qué son los Hooks en React?
Antes de comenzar con el tema de los Hook, debemos saber que estos nuevos tipos de elementos se introdujeron a la librería de React desde la versión 16.8.
Y a partir de esta incorporación:
Con los Hooks en React podemos crear componentes con estado (state) y demás características, como, la emulación de los métodos de ciclo de vida. Sin la necesidad de escribir clases.
Compatibilidad de Hooks con versiones anteriores
En la documentación oficial indica que los Hooks son:
- Complementos opcionales, no hay prisa por migrar nuestros proyectos a esta nueva forma de escribir código, no obstante, y puedes ir probando actualizando a la ultima versión de React. Te recomiendo que lo hagas en una rama diferente a producción.
- Compatibles con versiones anteriores, a pesar que son complementos nuevos, puedes usar tanto Hooks como componentes de clases, sin ningún problema.
El modelo de clases en React no desaparece
Quizá hayas escuchado a muchos desarrolladores decir. "Debes aprender Hooks por que los componentes de clases son obsoletos".
En mi punto de vista hay un error muy grande en esa frase, ya que si, debes aprender Hooks por las bondades que tienen, pero, para nada los componentes de clases son obsoletos.
Incluso, los creadores de React indican que no tienen planes de remover dichos componentes de clases, ya que, los Hooks son un excelente complemento a los modelos de clase.
Ventajas de utilizar los Hook
- La principal ventaja de un Hook es que nos permite dividir un componente en funciones más pequeñas, con base en, la relación de componentes y no por el ciclo de vida del componente.
- Esta nueva incorporación maneja una lógica funcional, la cual suele ser más sencilla de comprender que la lógica basada en Programación Orientada a Objetos.
- Muchos desarrolladores que utilizan componentes funcionales con Hooks, han logrado comprender más rápido y con menos esfuerzo, las props, la función del estado y la comunicación entre componentes, ya que, no se enfrentan a comprender el this, el cual, es inherente de una clase y el bind para poder tener acceso al this.
En fin, utilizar Hooks te facilitará la vida si no has programado en lenguajes Orientados a Objetos o fuertemente tipados, sobre todo, si con anterioridad ya sabes algo de JavaScript.
Reglas de los Hooks que debes conocer
Si al leer este post te estas animando en utilizar estos nuevos elementos, antes de ver los tipos y enseñarte como puedes utilizarlo, existen dos reglas que debes conocer.
1. Solo puedes llamar a los Hooks en niveles superiores
Si creas una función en React, debes asegurarte en declarar tus Hooks en el nivel superior o el hilo principal de tu función.
Recuerda que los componentes se actualizan y vuelven a renderizar cada vez que detectan un cambio de estado o propiedades.
Siguiendo esta regla los Hooks se invocaran siempre en el mismo orden en cada inicialización y/o actualización de tu componente.
2. Los Hooks solo se llaman desde funciones de React
En la clase de Componentes y propiedades te mencione las 3 características principales de un componente funcional:
- Debe ser una función pura.
- Las propiedades del componente son pasadas en el argumento de la función.
- Debe retornar un elemento valido de React.
Si utilizas un Hook que no sigue cualquiera de estas reglas, quizá no veas errores en consola, pero, puede ser que en tiempo de ejecución tengas errores e inconsistencias en tus datos.
Tipos de Hooks
Los Hooks los podemos dividir en dos grupos:
Hooks básicos
- useState, es un Hook que nos permite controlar el estado (state).
- useEffect, Hook de efecto que nos permite, entre otras cosas, manipular el ciclo de vida de los componentes.
- useContext, Hook de contexto, nos permite manejar el conexto actual de un componente.
Hooks adicionales
Créeme que con los 3 anteriores podrás hacer prácticamente cualquier cosa, no obstante, hay algunos otros que no esta de más que al menos sepas que existen.
- useReducer
- useCallback
- useDemo
- useRef
- useImperativeHandle
- useLayoutEffect
- useDebugValue
Poco a poco, conforme avance este curso iremos viendo cada uno. No te estreses en este momento por los adicionales.
Bien, en el siguiente apartado te iré dejando información de cada Hook, en algunos casos, será un vídeo y en otros solo texto, no obstante, los que considero más importante, les haré un post dedicado para que los comprendas mejor.
