En este artículo veremos una introducción a los Hooks de React, que son, como se utilizan, beneficios y reglas para su correcto uso.

Introducción

React es una de las librerías de frontend mas utilizadas del mundo y como tal se encuentra en constante evolución brindando en cada versión características nuevas que la hacen cada vez mas poderosa y simple de utilizar.
Una de las características que significo un punto de inflexión en el desarrollo con React fue la aparición de los Hooks al punto tal que hoy en día no se concibe realizar un desarrollo sin utilizarlos.

Que son los Hooks?

Los Hooks son una nueva característica introducida en React a partir de su versión 16.8.
Podemos definir los Hooks como funciones especiales propias de React que te permiten “enganchar” el estado y el ciclo de vida de un componente desde componentes funcionales, esto supone una nueva forma de trabajar en base a componentes funcionales y, por lo tanto, prescindir de los componentes de clase, los cuales suponían una primera y compleja aproximación para manejar los estados de React y el ciclo de vida de los componentes.

React proporciona un set reducido de Hooks, con la flexibilidad para responder ante diversas situaciones del ciclo de vida de una aplicación y la posibilidad de construir también nuestros propios Hooks para reutilizar el comportamiento con estado entre diferentes componentes.

Podemos distinguir entre los Hooks básicos que son los mas utilizados y los Hooks adicionales que se utilizan para resolver cuestiones puntuales.

Dentro de los Hooks básicos encontramos los siguientes :

• useState:permite añadir un estado local al componente, este Hook nos devuelve un valor con un estado mantenido y una función que es necesaria para actualizarlo (veremos un ejemplo mas adelante).
• useEffect:nos permite agregar efectos secundarios a un componente funcional dado, es decir, nos permite realizar modificaciones en nuestra lógica una vez se haya realizado el renderizado.

Algunos de los Hooks adicionales mas utilizados son los siguientes:

• useContext:Acepta un objeto de contexto, el valor devuelvo por React.createContext, posteriormente devuelve el valor de contexto actual para ese contexto en concreto.
• useReducer:Para manejar estados complejos y transiciones de estado. Una alternativa a useState.
• useCallback:Devuelve una función callback que se memoriza y que solo cambia si cambia una dependencia del árbol de dependencias.
• useMemo:Devuelve un valor memorizado.
• useRef:Devuelve un objeto ref mutable. El objeto devuelto estará disponible durante toda la vida útil del componente.

Como se usa un Hook de React

Hasta el momento vimos que es un Hook pero solo desde la teoria, ahora vamos a ver como se lo utiliza en la practica. En este caso veremos como se utiliza el Hook useState que es el hook mas utilizado y a su vez el mas básico, podríamos decir que es el “hola mundo” de los hooks.

Un ejemplo de un Componente funcional que usa el Hook useState, que recordemos trabaja con el estado del componente, y que va actualizando el estado del componente es el siguiente:

import React, { useState } from 'react'; 

function Contador() { 
// Declara una nueva variable de estado, la cual llamaremos “count” 
const [count, setCount] = useState(0); 
return ( 
	<div> 
		<h1> El botón ha sido pulsado {count} veces </h1> 
		<button onClick={() => setCount(count + 1)} > 
			Púlsame 
		</button> 
	</div> 
	); 
}

La forma de declarar un hook de estado es:
const [count, setCount] = useState(0)
Donde:

• count:El valor del estado.
• setCount:Método para actualizar el estado, lo que se haga aquí va a definir el nuevo valor del estado (estado).
• useState(0):Donde 0 es el valor inicial del estado .

El ejemplo que vimos es el mas sencillo pero nos sirve para comprender el funcionamiento de un hook, en próximos post veremos en detalle el funcionamiento del hook useState y sus particularidades.

Les proponemos un desafío!, se anima a agregar un botón que en lugar de aumentar en 1 el estado, lo disminuya?

Pueden practicar accediendo a este link de codepen: Ejemplo de Hook Basico

Beneficios

• Una sintaxis más limpia
  Los Hooks ademas de permitir crear/acceder al estado y a los ciclos de vida de React, ser fáciles de usar e implementar, también proporcionan un código limpio y fácil de entender.
  Las clases, que eran la estrategia que se utilizaban anteriormente para manejar el estado y ciclo de vida de componentes, son complejas, incluso al entenderlas, su lectura y entendimiento es más difícil en comparación con una función y esto es más notorio a medida que el componente crece.
  Para ejemplificar este beneficio a continuación vamos a ver 2 componentes que cuentan el numero de veces que se presiono el boton, pero uno usando hooks y otro utilizando clases:
  

  Componente utilizando Hook useState

  import React, { useState } from 'react'; 
  
  function Contador() { 
  // Declara una nueva variable de estado, la cual llamaremos “count” 
  const [count, setCount] = useState(0); 
  return ( 
  	<div> 
  		<h1> El botón ha sido pulsado {count} veces </h1> 
  		<button onClick={() => setCount(count + 1)} > 
  			Púlsame 
  		</button> 
  	</div> 
  	); 
  }
  

  Pueden ver el ejemplo funcionando accediendo a este link de codepen: Ejemplo de contador con hooks
  

  Componente utilizando Clases

  class Contador extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        counter: 0
      };
    }
  
    render() {
      return (
        <div>
          <h1> El botón ha sido pulsado {this.state.counter} veces </h1>
          <button
            onClick={() => this.setState({ counter: this.state.counter + 1 })}
          >
            Púlsame
          </button>
        </div>
      );
    }
  }
  

  Pueden ver el ejemplo funcionando accediendo a este link de codepen: Ejemplo de contador con clases
  
  Como vemos el código usando Hooks es mucho mas compacto, fácil de entender y mejora la calidad del código, lo cual es la motivación principal de los Hooks.


• Reutilizar código
  

  Con Hooks, podemos extraer lógica de estado de un componente de tal forma que este pueda ser probado y re-usado independientemente. Los Hooks te permiten reutilizar lógica de estado sin cambiar la jerarquía de tu componente. Esto facilita el compartir Hooks entre muchos componentes o incluso con la comunidad . Esto es gracias a la posibilidad que nos ofrece React de poder crear Hooks personalizados, al crear un Hook personalizado podemos reutilizar cierta parte del código en una sola función, de manera que podemos convertir algo repetitivo en algo funcional.

• Código optimizado (Babel)
  

  Si utilizamos un compilador, digamos Babel para utilizar código JS moderno, los antiguos componentes de clases posteriormente pasan a ser funciones con un montón de código extra para que funcione, pero los Hooks ofrecen la ventaja de que no necesitan de clases, por lo que ese código extra ya no sería necesario.
  Ademas es clave considerar que uno de los aspectos más importantes es que las clases no minifican tan bien como las funciones, esto significa que nuestro código ocupará más.
  La diferencia con un solo componente puede no ser relevante, pero si pasamos toda nuestra aplicación a funciones, puede marcar la diferencia. El output de Babel de una clase puede ser hasta un 40% más pesado y su ejecución es más lenta en el navegador.

Reglas de los Hooks

Como vimos los Hooks son funciones especiales que permite crear/acceder al estado y a los ciclos de vida de React , son fáciles de usar y tiene muchas ventajas, sin embargo para asegurar la estabilidad de la aplicación, debe de utilizarse siguiendo dos reglas básicas:

1. Los Hooks solo deben ser llamados en el nivel superior
   
   

   Esto quiere decir que no llames a un Hook dentro de bucles, condiciones o funciones anidadas. Así garantizas que los Hooks siempre se llamen en el mismo orden cada vez que un componente se renderiza. De esta manera React va a preservar correctamente el estado de los Hooks entre múltiples llamadas. Si uno de los Hooks esta oculto en un bucle o condicional, el orden puede cambiar, arruinando la lógica del componente.
   
   Para prevenir este comportamiento erróneo hay que evitar el uso de los hooks dentro de condicionales o funciones anidadas. En cambio, sí deben utilizarse siempre en el nivel superior de los componentes. Este uso únicamente en el nivel superior es lo que asegura que el estado interno de React se preserve correctamente entre diferentes llamadas del mismo hook.

   A continuación tenemos un ejemplo de aplicación de esta regla:
   
   Forma Incorrecta

   // 🔴 Estamos rompiendo la primera regla al usar un Hook en una condición
     if (name !== '') {
       useEffect(function persistForm() {
         localStorage.setItem('formData', name);
       });
     }
   

   Forma Correcta

   useEffect(function persistForm() {
       // 👍 No vamos a romper la primera regla nunca más.
       if (name !== '') {
         localStorage.setItem('formData', name);
       }
     });
   




2. Los Hooks solo deben llamarse en funciones de React
   
   No llames Hooks desde funciones JavaScript regulares. En vez de eso, puedes:

   • Llama Hooks desde componentes funcionales de React.
   • Llama Hooks desde Hooks personalizados.
   
   Siguiendo esta regla, te aseguras de que toda la lógica del estado de un componente sea claramente visible desde tu código fuente.