¿Para qué sirven las refs en React?

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

¿Sabes para qué sirven las refs en React? React es una librería de JavaScript que nos permite desarrollar interfaces de usuario para SPA o single page applications. Para ello, React ha creado una lógica propia que, a veces, puede ser restrictiva. Por eso mismo, React ha desarrollado las refs, un mecanismo que nos permite modificar un poco esta lógica. En este post, te enseñaremos para qué sirven las refs en React y en qué escenarios podemos usarlas.

¿Qué son las refs en React?

Las refs son un mecanismo que desarrolló React para ejecutar algunas acciones que son difíciles e, incluso, imposibles con su lógica usual. Las refs se pueden declarar de dos maneras: con el comando createRef o con el hook useRef. Para conocer más sobre esta estrategia, te sugerimos leer el post sobre referencias y el DOM en la documentación oficial de reactjs.org.

¿Para qué sirven las refs en React?

En nuestro post sobre las refs y el DOM en React, hemos mencionado superficialmente algunos usos que tiene este mecanismo. A continuación, te enseñaremos exactamente para qué sirven las refs en React.

Acceder a los elementos del DOM

Cuando nos cuestionamos para qué sirven las refs en React, la respuesta usual es para acceder a los elementos del DOM. En realidad, sin embarg, esto va más allá, pues al acceder a estos elementos estamos también accediendo a toda su API. Esto nos da acceso a los distintos métodos y propiedades que pueden tener los elementos que insertamos.

Te damos un ejemplo. Supongamos que hemos creado un formulario en React con un elemento input. Al final, un input en React es un HTMLInputElement, pues esto es lo que se estará renderizando por debajo. Ahora que tenemos este elemento, ¿cómo podemos acceder a métodos como focus o select de ese input desde React? Pues a través de las refs podemos acceder a la API del elemento HTML que está debajo de nuestro input JSX.

Esto se aplica a una infinidad de los elementos que usamos en React. Podríamos, por ejemplo, tener un reproductor de vídeo al que le queremos aplicar un método play. Entonces, cuando pienses para qué sirven las refs en React, puedes pensar en acciones como manejo de foco, selección de texto y reproducción media.

Guardar un elemento HTML

Una de las formas en las que podemos usar las refs es asignar el objeto creado al atributo ref de un elemento HTML. Para pone un ejemplo, imagina que hemos creado la siguiente ref:

const textAreaRef = useRef (null);

Ahora que tenemos esta constante, sabemos que siempre se guardará el objeto textAreaRef para los siguientes render, aunque cambie su valor. Entonces, podremos pasar esta constante textAreaRef como valor de una propiedad ref. A continuación, te ponemos un ejemplo con el elemento HTML textarea:

<textarea ref= {textAreaRef} {…props}>

¿Qué implica esto? Pues que en el primer render del componente que contenga estas líneas de código se creará la referencia y se pasará al elemento textarea. Veamos qué nos devuelve esto después del primer render:

useEffect (() => {

console.log (textAreaRef);

}, [ ]);

En tu inspector podrás ver que pasar una ref como propiedad de un elemento hace que se guarde el HTML de este elemento dentro del current de la ref. Es decir, después del primer render, veremos un current como el siguiente:

current: textarea.textarea-input

Entonces, este proceso de refs está creando el mismo efecto que lograría insertarle un id al elemento textarea y guardar este id en una constante con el comando document.getElementById. Sin embargo, lo hace de una manera más sencilla.

Ahora que hemos guardado el elemento HTML dentro de nuestra referencia, podemos acceder a los diversos métodos del elemento usando textAreaRef.current.nombredelmétodo. En estos escenarios, te invitamos a consultar la documentación del elemento a modificar en la página oficial de la Mozilla Developer Network o MDN para saber qué métodos hay disponibles.

Guardar un elemento y mantenerlo

Al preguntarnos para qué sirven las refs en React también podemos pensar en guardar elementos que queramos mantener con el mismo valor a lo largo de los renders. Entonces, así como antes hemos guardado null, también podrás guardar lo que quieras dentro del hook useRef.

Uno de los datos que puedes guardar en una ref es si un componente está montado o desmontado. Entonces, podrías crear una ref mounted que pase de false a true en tu código. Lo bueno es que, una vez esta ref sea true, no volverá a cambiar.

¿Quieres seguir aprendiendo?

Ahora que sabes para qué sirven las refs en React, te invitamos a seguir aprendiendo con nosotros sobre las posibilidades que ofrece React, así como otras herramientas de programación para la web. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás a desarrollar con lenguajes de programación como JavaScript, HTML, CSS y JSX. ¿Te animas a seguir aprendiendo con nosotros? ¡Inscríbete ya y cambia tu vida!

👉 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!