React es una librería JavaScript conocida por diseñar su propia sintaxis a partir de componentes de tipo función y hooks, alejándose cada vez más del uso tradicional de clases. En este post, te enseñaremos qué es y cómo funciona el hook useRef en React, fundamental para crear refs en esta librería de useRef in React.
¿Qué es useRef en React?
useRef en React es uno de los hooks más populares de esta librería de JavaScript después de useState, usado para declarar estados, y useEffect, usado para crear efectos.
Como puedes leer en nuestro post sobre refs y el DOM en React, el hook useRef en React es una de las maneras en que podemos crear refs. En realidad, es la manera más común actualmente de useRef, ya que ha reemplazado al comando createRef.
El hook useRef en React nos devuelve un objeto ref mutable, cuya propiedad current se inicializa en el argumento pasado como initialValue:
const refContainer = useRef (initialValue)
Como puedes leer en nuestro post sobre para qué sirven las refs en React, este hook nos permite guardar la referencia a elementos del DOM y acceder a los métodos de su API. Además, nos permite mantener cualquier valor mutable (como una variable de instancia en una clase) a lo largo de los siguientes render, sea un elemento del DOM o no. Es decir, la variable declarada con useRef, a diferencia de una variable simple, guardará el valor que tenía en el anterior render hasta que le pidamos actualizarse accediendo a .current en useRef in React.
Puede que el funcionamiento del hook useRef te parezca similar a useState en el sentido en que declarar un estado nos permite guardar valores dentro de él. La diferencia principal entre useState y React useRef es que, cuando modificamos estado, estamos forzando un render del componente.
Por su parte, usar un useRef no le notifica a React cuándo cambia el valor. Es decir, useRef no provoca render. Por ello, si tienes un dato que quieres que provoque render, debe estar en el estado.
¿Cómo funciona useRef en React?
Para mostrarte cómo funciona el hook useRef en React, te tenemos un ejemplo. Supongamos que queremos hacer un contador de render. Es decir, un elemento que sume cada vez que se produce un nuevo render en el componente. Para ello, debemos utilizar useRef en React. Esto se debe a que una variable común no guardará el valor del anterior render, por lo que será imposible la suma. Por su parte, un estado de React useRef provocará un nuevo render, haciendo que haya un loop de guardar y renderizar.
Para crear un contador de renders con el hook useRef en React, primero podemos crear un custom hook, dentro del que luego crearemos una ref.
Un custom hook es una función personalizada que empieza por la palabra use y que puede llamar dentro a otros hooks. Para aprender más sobre este concepto diferente a useRef in React, te invitamos a leer nuestro post sobre qué son los custom hooks en React.
Entonces, nuestro custom hook se ve de la siguiente manera. Allí hemos creado una ref que hemos inicializado a 0. Luego, hemos aplicado un efecto que se ejecutará siempre después de cada render. Este efecto hace que se sume 1 al valor de la ref y luego se guarde este nuevo valor.
function useRenders ( ) {
const count = useRef (0)
useEffect (( ) => {
count.current = count.current + 1
})
return count.current
}
Ahora que tenemos este custom hook, podemos añadirlo a cualquier componente que tengamos al igualarlo a una variable. A continuación, encuentras un ejemplo:
const renders = useRenders( );
Una vez tenemos el valor de la ref dentro de una variable en nuestros componentes, podemos llamarla y pintarla en donde sea con tan solo abrir una ventana a JavaScript en React o llamar a un console.log:
{renders}
console.log (renders)
¿Quieres seguir aprendiendo?
Ahora que sabes qué es y cómo usar el hook useRef en React para crear refs, ¡es el momento de usar estos conocimientos en tus propios proyectos! Si quieres seguir aprendiendo sobre el desarrollo de proyectos para la web, no te pierdas nuestro Desarrollo Web Full Stack Bootcamp. En este espacio de formación intensiva, aprenderás todo lo necesario para convertirte en un experto del desarrollo web en pocos meses de la mano de grandes profesionales. ¡Anímate a seguir aprendiendo sobre React useRef con nosotros e inscríbete para impulsar tu vida en el sector IT!
