Master de Hooks en React JS, características y usos

Master de Hooks en React JS, características y usos

Hola viajero, hoy nos vamos a embarcar en una nueva aventura en este curso gratuito de React JS, comenzaremos a revisar y comprender el tema de los Hooks en React, te enseñare a utilizar cada Hook nativo y sus reglas.

Si deseas apoyarme, es muy simple, solo debes compartir cada clase en tus redes sociales y listo, con eso podré subir más clases e iremos avanzando con proyectos cada vez más interesantes.

Te dejo la clase anterior, para que puedas repasar o veas otras clases si es tu primera vez en EWebik:

 

📌 Suscríbete a mi canal y activa la campanita para que no te pierdas ningún video 🤘

 

¿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 renderear 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.

 

Hook de estado useState

El primer Hook que veremos es el useState, y aunque, ya lo hemos visto en el vídeo de state y ciclo de vida, hoy vamos a profundizar en este tema.

 

 

¿Cómo utilizar el Hook useState en React?

¿Cómo utilizar el Hook useState en React?...

Hoy te enseñaré a utilizar el Hook de estado useSt...

 

Hook de efecto useEffect

Con useEffect podrás agregar a tu componente la posibilidad de ejecutar tareas secundarias, tales como los métodos de ciclo de vida sin la necesidad de utilizar componentes de clases, en la siguiente clase te explico como utilizar este Hook de una forma profesional.

 

 

Hook useEffect, utilizando el Hook de efecto de forma correcta

Hook useEffect, utilizando el Hook de efecto de fo...

Hoy aprenderás la forma correcta ✔️ de como utiliz...

 

Hook de contexto useContext

Con este Hook podrás comunicar tus componentes funcionales entre si, tal y como lo harías con API Context, no obstante, tu código estará más simplificado y será más fácil de leer, por favor, mirá la siguiente clase y suscríbete al canal.

¿Cómo utilizar el Hook useContext? Comunicación de componentes funcionales

¿Cómo utilizar el Hook useContext? Comunicación de...

Hoy aprenderás a utilizar el Hook useContext con e...

 

Hook useReducer

Si en tu proyecto cuentas con un state muy complicado o el valor actual depende del valor anterior, useReducer ha venido a nuestra ayuda, y en esta clase te ayudo a comprenderlo y mediante un ejemplo revisamos cada una de sus posibilidades, espero te guste.

¿Cómo utilizar el Hook useReducer?

¿Cómo utilizar el Hook useReducer?...

El ▷▷ Hook useReducer ◁◁ es una alternativa de use...

 

Hooks useCallback y useMemo

En esta clase te enseñaré a memorizar funciones a través del Hook useCallback y, también, veremos como memorizar componentes a través de useMemo, esta clase es muy importante, ya que, te darás cuenta por qué useCallback siempre va de la mano con React.memo y cual es la principal diferenia entre el Hook useMemo y el HOC React.memo.

Utilizando los Hooks useCallback y useMemo

Utilizando los Hooks useCallback y useMemo...

Hoy aprenderás a utilizar ✔️ el Hook useCallback e...

 

¿Es todo? Claro que no, por favor, suscríbete a mi canal en YouTube y a mi boletín para que te enteres cuando suba nuevas clases, ya que React no es el único curso que estoy subiendo. Te aseguro que los demás también te van a gustar.

 


Juan Carlos G

Electrónica y diseño web

Durante años he desarrollado plataformas dedicadas al rastreo satelital y varios sitios web que se encuentran en la primera página de Google, y hoy quiero compartir contigo lo que se en tecnologías como Node JS, PHP, C# y Bases de datos, si quieres apoyarme sígueme en mis redes sociales y suscríbete a mi canal de YouTube.

Puedes seguirme en mis redes