Usando Hooks en React, qué son y para qué sirven

Reconozco que la primera vez que escuché la palabra hook durante mi época de estudiante inmediatamente volvió a mi mente la imagen de Dustin Hoffman persiguiendo a Robin Willians en la pantalla. Pero evidentemente no estábamos hablando de lo mismo.

Dejando las bromas a un lado es posible que ya te encuentres familiarizado con el uso de hooks. En programación, el término hooking abarca una gama de técnicas utilizadas para alterar o aumentar el comportamiento de un sistema operativo, de aplicaciones o de otros componentes de software interceptando llamadas de función o mensajes o eventos pasados entre componentes de software. En React los hooks permiten administrar el estado y otras funciones sin tener que escribir una clase.

Antes de comenzar, destacar que el uso de Hooks en React es algo relativamente reciente, de hecho fueron presentados durante el React Conf 2018 por Sophie Alpert y Dan Abramov, seguidos por Ryan Florence demostrando cómo refactorizar una aplicación usándolos. El video puedes mirarlo aquí:

Antes de continuar, debemos notar que los Hooks son:

• Completamente opcionales.
• Puedes probar Hooks en unos pocos componentes sin reescribir ningún código existente. Pero no tienes que aprender o usar Hooks ahora mismo si no quieres. 100% compatibles con versiones anteriores.
• Los Hooks no tienen cambios con rupturas con respecto a versiones existentes. Disponibles de inmediato.
• Los Hooks están disponibles desde el lanzamiento de la versión v16.8.0.

Los ganchos básicos son useState, useEffect y useContext.

• useState es un Hook que permite añadir el estado de React a un componente de función.
• useEffect, al usar este hook, le estamos indicando a React que el componente tiene que hacer algo después de renderizarse. React recordará la función que le hemos pasado (nos referiremos a ella como nuestro “efecto”), y la llamará más tarde después de actualizar el DOM.
• useContext Acepta un objeto de contexto y devuelve el valor de contexto actual. El valor actual del contexto es determinado por la propiedad value del ascendentemente más cercano en el árbol al componente que hace la llamada.

Pero existen otros hooks o ganchos adicionales que puedes usar y que agregan nuevos comportamientos como useRef y useMemo. Por no hablar de que incluso puedes crear tus propios hooks personalizados. ;)

useRef

La función useRef devuelve un objeto ref mutable e inicializa su propiedad .current al argumento pasado. A menudo se confunde el uso del gancho useRef con el gancho useState.

useRef solo tiene una propiedad: .current. Es decir, React no vuelve a renderizar la página cuando cambia su elemento, ni tampoco se vuelve a renderizar si cambia el valor de la propiedad .current.

import React, { useState, useRef } from 'react';
 
export default function App() {
    const count = useRef(null);
    const [number, setNumber] = useState(0);
 
    const checkNumber = () => {
        if (count.current.value < 10) {
            count.current.style.backgroundColor = "red";
        } else {
            count.current.style.backgroundColor = "green";
        }
    };
 
    return (
        <div className="App">
            <h1>Enter a number greater than 10</h1>
            <input
              ref={count}
              type="text"
              value={number}
              onChange={(e) => setNumber(e.target.value)}
            />
            <button onClick={() => checkNumber()}>Click</button>
        </div>
    );
}

En este código de ejemplo, el color del elemento de entrada cambia según el número que ingrese en el cuadro de entrada. Primero, asigna el resultado del hook useRef() a la variable de conteo. Hay dos elementos: uno de entrada y el botón. El elemento de entrada tiene el valor del número y la propiedad ref de la etiqueta de entrada cuenta para coincidir con la variable.

Cuando se hace clic en el botón, se llama a la función checkNumber(). Esta función verifica si el valor del número es mayor que 10 para luego establecer el color de fondo del elemento de entrada usando la propiedad count.current.style.backgroundColor.

useMemo

El hook useMemo es un poco diferente. Éste vuelve a calcular un valor en caché cuando cambie cualquiera de sus dependencias. Por lo que evitamos invertir tiempo extra en cálculo en cada renderizado de nuestra aplicación.

Básicamente, su sintaxis es la siguiente:

const memoizedValue = useMemo(() => computeExpensiveValue(a), [a]);

Utilizando el ejemplo anterior, ahora podemos alternar los colores de dos encabezados. Llama al hook useState para realizar un seguimiento de sus valores. Una función muestra si el color es cálido o frío según su valor.

import React, { useState, useMemo } from 'react';
 
export default function App() {
    const [color1, setColor1] = useState("blue");
    const [color2, setColor2] = useState("green");
    const toggleColor1 = () => {
        return color1 === "blue" ? setColor1("red") : setColor1("blue");
    };
 
    const toggleColor2 = () => {
        color2 === "green" ? setColor2("orange") : setColor2("green");
    };
 
    const displayColor = () => {
        var now = new Date().getTime();
        while (new Date().getTime() < now + 1000);
 
        return color1 === "blue" ? "cool" : "hot";
    };
   return (
        <div className="App">
            <h2 style={{ color: color1 }}>Text 1 color: {color1}</h2>
            <h4>It is {displayColor()} color</h4>
            <button onClick={toggleColor1}>Toggle Color</button>
            
            <h2 style={{ color: color2 }}>Text 2 color: {color2}</h2>
            <button onClick={toggleColor2}>Toggle Color</button>
        </div>
    );
}

Ahora si envolvemos la función displayColor en el enlace useMemo podemos pasar el color1 en la matriz de dependencia.

const displayColor = useMemo(() => {
    var now = new Date().getTime();
    while (new Date().getTime() < now + 1000);
 
    return color1 === "blue" ? "cool" : "hot";
}, [color1]);

El hook useMemo toma una función y las dependencias como parámetros y se representará sólo cuando cambie una de sus dependencias.

Conclusión:

Como puedes ver, los hooks o ganchos son una característica muy poderosa y se usan comúnmente en proyectos de React. No son obligatorios, pero ofrecen un gran potencial de optimización. Hay otros ganchos avanzados como useReducer, useLayoutEffect y useDebugValue.

Si quieres saber más, existe muy buena documentación en la web oficial de React pero el mejor consejo pasa por la práctica constante, creando pequeños proyectos como formularios o contadores de reloj.