Refs en React

Si queremos recordar alguna información, pero no queremos que su cambio provoque el renderizado del componente, entonces nos serán útiles refs y respectivamente el hook useRef que funciona con ellos.

Una ref (o referencia) es un objeto JavaScript normal con una única propiedad current, que puedes leer o modificar.

Al igual que los estados, las refs pueden almacenar cualquier tipo de datos: pueden ser números, cadenas, objetos e incluso funciones.

Si tus datos se utilizan para el renderizado, guárdalos en el estado, y si no necesitas el renderizado, en ese caso el uso de refs puede ser más eficiente. Además, a diferencia del estado, el valor de la ref cambia inmediatamente.

En general, las refs se aplican donde necesites apartarte de React e interactuar con APIs externas - más a menudo con APIs del navegador, que no afectan a la visualización del componente. Esto puede ser, por ejemplo, almacenar el id de un temporizador o almacenar un objeto para el que no se necesita calcular JSX, pero lo más común es la interacción con elementos del DOM. Se pueden usar para gestionar el foco, la selección de texto o la reproducción de medios.

En la siguiente lección analizaremos el trabajo con refs y el hook useRef en la práctica.