Las refs, llamadas así por el concepto de referencia, son un mecanismo creado por React para acceder a los elementos del DOM y su API, lo cual nos permite ejecutar diversas acciones. En este post, te enseñaremos cómo crear una ref en React para que utilices este mecanismo en tus propios proyectos.
¿Cómo crear una ref en React?
Antes de enseñarte cómo crear una ref en React, te recomendamos conocer más sobre este concepto. Por ello, te invitamos a leer nuestros posts sobre refs y el DOM en React y para qué sirven las refs en React.
Existen dos maneras de crear una ref en React: por medio del comando antiguo createRef o por medio del recientemente implementado hook useRef. A continuación, te enseñaremos cómo crear una ref en React con el hook useRef, por lo que es más usado actualmente.
Entonces, lo primero que haremos será declarar el hook, que podemos inicializar con el valor que queramos. Sin embargo, cuando queremos usar la ref que nos devuelve el hook para pasarla a un elemento HTML o componente de clase, normalmente se inicializa con null.
useRef (null);
Este hook nos devolverá un objeto que podemos llamar como queramos. En nuestro caso, estamos creando la ref para guardar el elemento textarea, por lo que llamaremos al objeto textAreaRef.
const textAreaRef = useRef (null);
Con la línea de código anterior, hemos logrado crear una ref en React. Pero ¿qué tiene esto dentro?
¿Qué sucede cuando creamos una ref en React?
Al crear una ref en React estamos creando un objeto con distintas características. Para ver exactamente qué tiene este objeto, podemos insertar un console.log después de declarar la referencia:
console.log (textAreaRef);
Ahora, al abrir tu inspector verás que una ref es, básicamente, un objeto con la propiedad current. Esta propiedad tendrá el valor con el que hemos inicializado nuestra ref. Es decir, nosotros vemos current: null. Sin embargo, si hubiéramos declarado useRef (1) veremos un current: 1.
Lo más importante que debemos entender de este objeto es que mantendrá la referencia que hemos guardado a lo largo de los sucesivos renders. Es decir, el componente se renderizará la primera vez y renderizará nuestro objeto ref. La próxima vez que se renderice, este hook, en vez de crear un objeto nuevo, nos dará exactamente el mismo objeto. Esto quiere decir que siempre apuntará a la misma referencia.
Para conocer más sobre esta lógica del mismo objeto, te recomendamos leer nuestro post sobre referencias en React en nuestro blog sobre desarrollo web. Allí, también podrás aprender a pasar una ref en React y modificar una ref en React.
¿Qué sigue?
Ahora que sabes cómo crear una ref en React, ¡es el momento de aplicar este mecanismo en tus propios proyectos! Para conocer más sobre la creación y desarrollo de todo tipo de proyectos de programación para la web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio en donde aprenderás a desarrollar con lenguajes como JavaScript, JSX, HTML y CSS. ¡Te esperamos pronto para acompañarte en tu camino hacia el éxito!
