Entendiendo useRef en React

React es una biblioteca de JavaScript increíblemente poderosa y flexible para construir interfaces de usuario. Uno de sus conceptos más útiles pero a veces confusos son los hooks, introducidos en la versión 16.8. Entre estos hooks, useRef es particularmente interesante debido a su versatilidad.

¿Qué es useRef?

El hook useRef es una función que permite a los componentes de React acceder y interactuar con nodos del DOM o almacenar cualquier valor mutable que no causa un re-render cuando se actualiza.

const miRef = useRef(valorInicial);

El objeto retornado por useRef tiene una propiedad .current que es inicializada con el argumento pasado (valorInicial). Este objeto persistirá durante toda la vida del componente.

Uso común de useRef

Acceso al DOM

Una de las aplicaciones más comunes de useRef es acceder a un elemento del DOM directamente. Esto es útil cuando necesitas manipular un elemento sin causar un re-render.

function MyComponent() {
const myInput = useRef(null);

const focusInput = () => {
myInput.current.focus();
};

return (
<>

<input type="text" />
<button>Focus the input</button>
</>

);
}

Almacenamiento de valores

useRef también es útil para mantener un valor que no quieres que cause re-renders cuando cambia, como puede ser el estado anterior de un componente o un contador de intervalos.

function TimerComponent() {   
  const intervalRef = useRef();  
   useEffect(() => {         const id = setInterval(() => {             // tu lógica de intervalo aquí         }, 1000);   
     intervalRef.current = id; 


  return () => clearInterval(intervalRef.current);     }, []); 

// ... }

¿Por qué no solo usar useState?

Podrías preguntarte por qué no simplemente usar useState para almacenar valores. La diferencia clave es que cambiar el valor de .current en el objeto retornado por useRef no provocará un re-render, mientras que cambiar el estado con useState sí lo hará.

Conclusión

useRef es una herramienta esencial en el kit de herramientas de React. Ya sea que necesites interactuar con el DOM o mantener valores entre renders sin causar actualizaciones innecesarias, useRef es tu amigo. Con su ayuda, puedes escribir componentes más eficientes y realizar tareas que de otro modo serían complicadas en el paradigma reactivo de React