Member-only story
React. El hook useRef
Características y casos de uso del hook useRef
Desde que aparecieron los hooks seguramente os hayáis “hartado” de emplear useState y useEffect en vuestros componentes funcionales. Al fin y al cabo son los que probablemente tengan un uso más intuitivo dentro del universo de React.
Sin embargo el hook useRef es menos habitual pese a sus interesantes características y a que sin él no seríamos capaces de implementar determinadas funcionalidades (algo que veremos al final de este artículo). Por tanto en este artículo quiero hablaros tanto de su funcionamiento como de sus casos de uso más interesantes.
¡Vamos allá!
Características del hook useRef
El hook useRef tiene su origen en el método createRef que se emplea en los componentes de clases y que permitía crear una “referencia” (valga la redundancia) a un elemento del DOM creado durante el renderizado.
Esta parte es importante. En React, lo más común cuando queremos modificar un elemento del DOM es forzar un nuevo render mediante un cambio en el estado, es decir, delegamos la generación del DOM a React, que en base a las propiedades pasadas a los elementos construirá el árbol. Podemos verlo como un caso de programación declarativa.
Sin embargo, hay veces en los que necesitamos modificar un elemento del DOM de forma imperativa, por ejemplo cuando queremos realizar una animación, reproducir un archivo multimedia o forzar un “focus” en un campo. Es aquí cuando resulta útil tener la referencia directa al elemento del DOM para poderlo modificar de forma imperativa.
En el ejemplo anterior, creamos una referencia en el constructor del componente que posteriormente asignamos mediante la propiedad ref del input. Cuando el usuario pulsa el botón, accedemos directamente al elemento del DOM mediante this.textInput.current para invocar su método focus() .
La versión funcional de este componente empleando el hook useRef sería:
