7 React Hooks que debes conocer para un código más limpio

Gestiona mejor el estado de los componentes funcionales

Junto con la versión 16.8 de React, llegaron los Hooks. Así que para conocerlos más, decidí escribir este artículo donde comparto algunos de sus usos más importantes, su importancia y la forma de aplicarlos a código.

Si actualmente trabajas (o quieres empezar) con un proyecto donde utilices esta biblioteca de Javascript, no te pierdas esta información.👇

¿Qué son los React Hooks?

Proporcionan la posibilidad de manejar el estado y la interfaz con los métodos de ciclo de vida de React. Es decir, permiten agregar una lógica reusable a los componentes para obtener otros mucho más sencillos de entender y manejar.

¿Qué reglas seguir para usar React Hooks?

Las reglas básicas a considerar para usarlos correctamente son:

• Únicamente pueden utilizarse en componentes funcionales.
• Se llaman solo en el nivel superior. No pueden ser llamados dentro de ciclos, condicionales, ni funciones anidadas.
• Es necesario importar los Hooks que se utilicen desde React.

De hecho, para que cumplir estas reglas te sea fácil, React lanzó un plugin de ESLint llamado eslint-plugin-react-hooks, que viene por defecto con Create React App.

¿Cuáles son algunos de los Hooks de React?

Entre algunos de los Hooks que proporciona React se encuentran:

1. Hook de estado — useState()

Antes, en los componentes de clase se utilizaba this.state y this.setState para manejar el estado, pero ahora existe useState. Este facilita el trabajo, y es uno de los Hooks más comunes.

Como único parámetro, toma el valor inicial del estado y devuelve un arreglo con 2 elementos: el primero es el estado actual y el segundo, la función que se utiliza para actualizar ese estado.

En el código se ve de esta manera:

const [state, setState] = useState(valorInicial);

Y comúnmente, la función para actualizar el estado inicia con “set”.

En el siguiente código se creó la función Ejemplo para mostrar cuántas veces se hace clic en un botón, iniciando en 0. Para ello, la función setCount actualiza el estado count a count + 1 cada vez que hay clics, tal y como se muestra a continuación:

2. Hook de efecto — useEffect()

Si dominas los componentes de clase, piensa en useEffect como una combinación de los métodos de ciclo de vida componentDidMount, componentDidUpdate y componentWillUnmount. Este permite agregar efectos secundarios a los componentes.

El primer parámetro de useEffect es una función que se ejecuta cuando el componente se renderiza. Y para ejecutar otra función al momento de desmontar el componente, la función del primer parámetro necesariamente debe retornar esta segunda función.

El segundo parámetro es un arreglo que contiene una lista de dependencias del efecto. En caso de que sea un arreglo vacío, la función asociada a useEffect solo se ejecuta al renderizar el componente por primera vez, y si no hay arreglo, la función se ejecuta la primera vez que se renderiza el componente y todas las veces subsecuentes que se actualiza.

De manera sencilla, se ve así en el código:

useEffect(función, dependencias);

3. Hook de referencia — useRef()

En React, los componentes padres interactúan con sus hijos a través de las propiedades, por lo que para modificar un hijo es necesario que se renderice con nuevas propiedades.

Por otro lado, no hay que olvidar que hay ocasiones en las que se debe modificar imperativamente. Y para este caso, las referencias son útiles.

Antes, React utilizaba createRef() para crear referencias, pero ahora existe el Hook useRef que cumple este propósito. Retorna un objeto ref mutable y toma como parámetro el valor inicial:

const variableRef = useRef(valorInicial);

Para enlazar esta referencia a un elemento, se utiliza la propiedad ref así:

<img ref={variableRef}>

El objeto que devuelve useRef contiene la propiedad current donde se encuentra la referencia al elemento que se enlaza. Y a su vez, esta referencia contiene todas las propiedades del elemento para que se pueda manipular directamente.

En el siguiente ejemplo se declara textInput (objeto ref), este se refiere al primer input con ref={textInput} y la función handleClick lo enfoca:

4. Hook de contexto — useContext()

Si bien los props son muy útiles, el flujo de las aplicaciones es cada vez más complicado conforme crecen. La buena noticia es que la Context API de React resuelve este problema, permite crear un contexto y compartir información entre componentes de diferentes niveles, sin necesidad de utilizar props.

Este Hook recibe como parámetro un objeto de contexto y devuelve el valor del contexto actual, justo como se muestra ahora:

const valor = useContext(objetoDeContexto);

Aunque igual es posible usar desestructuración para obtener valores específicos:

const { valorEspecífico } = useContext(objetoDeContexto);

5. Hook useReducer()

Se puede empezar a entender a este Hook con la premisa de que useState está construido con useReducer “de fondo”. Por lo que así como useState facilita el manejo del estado de un componente, useReducer da un paso más y permite emplear diversos actions.

Este Hook recibe como primer parámetro un reducer que toma el estado previo y un action para devolver un nuevo estado, y como segundo parámetro el estado inicial, es decir, retorna un arreglo con el estado actual y el método dispatch.

const reducer = (estado, action) => nuevoEstado;
const [estado, dispatch] = useReducer(reducer, valorInicial);

El siguiente código tiene una funcionalidad muy similar al ejemplo que puse en useState, pero a diferencia de este, con useReducer existe la posibilidad de incrementar y reducir la cuenta mediante actions.

6. Hooks useMemo() y useCallback()

A grandes rasgos, estos 2 Hooks ayudan a reducir la cantidad de trabajo que se necesita en un renderizado y el número de veces que se renderiza un componente.

El Hook useMemo recibe como parámetros una función de “crear” y un arreglo de dependencias, y devuelve un valor memorizado (el resultado de la función que pasa como parámetro):

const valorMemorizado = useMemo(función, dependencias);

La función asociada a useMemo se corre cuando el componente se renderiza y se vuelve a correr únicamente cuando alguno de los elementos del arreglo de dependencias cambia.

Por su parte, useCallback tiene una funcionalidad muy similar, pero en lugar de memorizar un valor, memoriza una función (un callback), tal y como muestro ahora:

const funciónMemorizada = useCallback(funciónCallback, dependencias);

Si observas, puedes notar que lo anterior equivale a:

const funciónMemorizada = useMemo(() => funciónCallback, dependencias);

7. Custom Hooks

React también te permite crear tus propios Hooks.

Estos Hooks personalizados son funciones que tienen un nombre que empieza con “use”, que llaman a otros Hooks y que cumplen con las reglas que vimos al principio de este artículo.

Encuentra más alternativas para tu proyecto

En resumen, los React Hooks facilitan la resolución de muchos problemas que se te pueden presentar durante el desarrollo de una aplicación con esta biblioteca. Y lo hacen de una manera sencilla de entender e implementar para que les saques ventaja.

Los anteriores solo son algunos de los muchos que ofrece React, por lo que si deseas conocer más, te recomiendo ampliamente visitar y leer la documentación oficial.

¿Quieres leer más temas relacionados? 👉Visita el blog de Nowports Tech👈