Cmo rayos funciona el hook useRef en React?

Intro

En pleno 2021 la gran mayora de los desarrollos hechos en react usan hooks, los primeros, ms bsicos y los que prcticamente usaras en el 100% de tus desarrollos sin lugar a dudas son useState y useEffect; pero muchos dev olvidan que hay otros hooks bastante interesantes, menos conocidos, pero igual de importantes para aplicarlos a casos de uso especficos, uno de ellos obviamente es useRef.

Tratemos de comprender las bases de este hook, como funciona, y sobre todo lo ms importante a mi criterio: cuando usarlo.

Sintaxis

• Se lo debe importar como cualquier otro hook.

import React, { useRef } from 'react';

• Su declaracin es sencilla:

const variableDeReferencia = useRef(valorInicial);

Por ejemplo:

const inputRef = useRef();

La constante inputRef almacena una referencia al DOM que no tiene valor inicial.

Para poder enlazar nuestra referencia, por ejemplo, a un input, se usa la propiedad ref

<input type="text" ref={inputRef} />

Ahora nuestra variable inputRef tiene una referencia directa al input, gracias a la propiedad ref.

Ahora bien, si imprimimos por consola el contenido de la variable inputRef veremos que nos regresa un objeto con la propiedad current y dentro de ella la referencia al input, dicha referencia tiene en su interior todas las propiedades que pueden ser usadas en un input de tipo text, como por ejemplo: className, value, id, name, placeholder, entre otras.

En este punto ya podemos manipular de manera directa dicho input.

useRef() casos de uso

Este hook puede usarse en 2 casos especficos:

• Acceder al DOM de manera directaCuando necesitamos acceder a un elemento HTML del DOM, en vanilla js haramos algo como esto:

<input type="text" id="mi-input" />

const input = document.querySelector("#mi-input");// o tambin esto:const input = document.getElementById("mi-input");

Este cdigo es correcto pero cuando de proyectos grandes se trata esta sintaxis ser muy complicada de mantener, por ellos y por muchos motivos ms existen libreras como react que nos ayudan a manipular el DOM de una manera un poco ms abstracta. Por ello existe el hook useState que permite crear variables de estado para poder usar el Virtual DOM de react.

Ahora bien, useRef accede a elementos del DOM de manera directa, sin aprovechar las bondades que nos da react, entonces, por que quisiramos hacer algo as? No tiene mucho sentido verdad? Por ahora qudate con este pequeo concepto, con los ejemplos podrs comprender mejor.

Ejemplo #1

Despus de esta extensa pero necesaria intro, veremos un poco de cdigo, enlazaremos un input a una referencia e imprimimos el valor del input por consola.

Ejemplo #2

Al tener un formulario, podemos darle focus automatico al primer input cuando la pgina se renderiza por primera vez:

Puedes probar recargando la pgina, siempre el primer input tendr el foco por defecto.

Ejemplo #3

Podemos aadir una clase CSS a un elemento del DOM apretando un botn:

NOTA: Considere estos primeros ejemplos como ejemplos de papel o de juguete, no se debera usar el hook de esta manera, solo son ejemplos para ilustrar y comprender cmo funciona useRef.

• Crear una variable mutable persistente entre rendersEste punto es el caso de uso ms realista para usar useRef, los ejemplos anteriores podran ser resueltos de otra manera sin necesidad de importar y usar useRef, ahora veremos ejemplos donde su uso es necesario.

Ejemplo #4

Al hacer una llamada una AP es posible que intentemos renderizar componentes condicionalmente, por ejemplo:

• En <App /> renderizamos condicionalmente el componente <Users />

• hace una llamada a la API JSON placeholder para obtener 10 usuarios de prueba y pintarlos en pantalla cuando le damos al botn Mostrar / Ocultar

• Solo para el ejemplo simulamos que la respuesta de la API ser de 4 segundos (lo que es una barbaridad de tiempo)

• Imaginemos que le damos click al botn, empieza a correr los 4 segundos establecidos, pero antes de que concluya y podemos ver los usuarios en pantalla, le volvemos a dar al botn,el programa seguir funcionando pero nos aparecer un horrible error en la consola:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

En cristiano este error mas o menos nos dice que intentamos actualizar el estado de un componente desmontado, y no da una pista: usar la funcin de limpieza que el hook useEffect

Ahora bien, podemos resolver esto usando un useRef para mantener la referencia del componente y solo realizar actualizaciones de estado cuando este se encuentre montado en la aplicacin.

La solucin se la puede ver a continuacin:

Intentaremos explicar un poco:

• Creamos una variable de referencia isMountedRef que empieza como true, esta variable representar al componente <Users /> cuando est montado.

• Ahora en el useEffect usamos un return para MUTAR
  el objeto y cambiar el valor a false, osea, componente <Users /> cuando est desmontado.

• Ahora con un if, solo haremos la peticin con getUsers cuando isMountedRef sea true, dicho en otras palabras, slo cuando el componente est montado.

De esta manera puedes hacer peticiones a API's un poco ms seguras y confiables para evitar problemas con el servidor cuando estemos en produccin.

Referencias

• https://acortar.link/JHlfEK

Conclusiones

• useRef es un hook que permite la manipulacin directa de elementos del DOM.
• useRef no usa el virtual DOM de react.
• Para enlazar useRef a un elemento HTML, dicho elemento debe tener la propiedad ref con el valor de la variable de referencia.
• useRef siempre regresa un objeto mutable con una nica propiedad current.
• Puedes usar un useRef para hacer peticiones a API's de una manera ms controlada, y no siempre dependiendo del servidor en produccin.

Quiza puede ser de tu inters:

3 mtodos muy tiles para objetos en Javascript

dux May 21 2 min read

#javascript #webdev #frontend #spanish

React: state para dummies con una analoga simple

dux May 17 2 min read

#react #javascript #webdev #spanish

7 editores de cdigo en la nube para frontends

dux May 4 3 min read

#javascript #webdev #spanish #frontend

10 trucos y optimizaciones de cdigo con JavaScript para 2021

dux Mar 29 9 min read

#javascript #webdev #frontend #spanish