useRef en React

Autor: | Última modificación: 10 de octubre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

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.

¿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, 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.

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 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, 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 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, 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 con nosotros e inscríbete para impulsar tu vida en el sector IT!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!