Ejemplo práctico de uso de useRef Hook en React

Una explicación rápida sobre el useRefgancho en React.

Este artículo explicará un tema que a veces confunde a algunos desarrolladores, especialmente a los nuevos con React.

El gancho de useRef si no tienes una idea clara de cómo funciona este gancho. ¿Cuándo tienes que usarlo? este artículo le resultará beneficioso.

useRef Hook

El useRefes una función que puede tener un argumento y devuelve un objeto con una propiedad currentcon su valor asignado.

¿Qué pasa si quiero cambiar ese valor? Simplemente escriba lo siguiente val.current = “bar"y el valor cambiará porque useRefes mutable, lo que significa que se le puede asignar cualquier valor, también nodos y elementos DOM como valores.

Ahora el valor var.currentha cambiado, pero el componente seguirá siendo el mismo, esto se debe a useRefque no vuelve a representar el componente, pero vamos a imprimir el valor de var.current.

El valor ha cambiado pero no se refleja en el componente. Esta es una característica útil porque podemos cambiar los valores del componente o las propiedades en los elementos DOM sin volver a renderizar el componente.

Elementos de acceso en el DOM

La forma más común de usar useRefes acceder a los elementos DOM. La forma de hacer esto es agregar una propiedad refen el elemento DOM.

Al hacer esto, podemos acceder al elemento con val.currenty cambiar sus propiedades de la misma manera que se obtiene un elemento de con getElementById.

En el código de arriba, agrego un botón que al hacer clic en el evento, activa una función que cambia el texto a 'Hola Mundo' y el fondo a rojo.

Funciona perfectamente y sin volver a renderizar el elemento.

Conclusiones

El useRefgancho, como puede ver, permite realizar acciones complejas en nuestro componente para mejorar el rendimiento y la interactividad de nuestra aplicación. Espero que este artículo le haya resultado útil. Gracias por leerlo.

Aprende más