React. El hook useRef

Características y casos de uso del hook useRef

Gerardo Fernández
5 min readSep 20, 2020

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.

--

--

Gerardo Fernández

Entre paseo y paseo con Simba desarrollo en Symfony y React