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