useRef?useRef es un Hook de React que proporciona una forma de crear una referencia mutable que persiste durante todo el ciclo de vida del componente.
Es como una “caja” que puede mantener un valor mutable en su propiedad .current.
En React, un valor mutable es cualquier valor o referencia que puede cambiar sin la necesidad de ser recreado, como un objeto, arreglo o instancia de una clase. Esto es importante porque React espera que los datos que provocan cambios en la UI sean inmutables para que pueda detectar cambios fácilmente y actualizar la interfaz solo cuando sea necesario.
.current no causa re-renderizadosconst refContainer = useRef(valorInicial);useRef es especialmente útil en los siguientes escenarios:
Un caso común es manipular elementos del DOM, como dar foco a un input.
Este componente permite enfocar el campo de texto (input) programáticamente usando useRef.
Al hacer clic en el botón, la función focusInput llama a inputRef.current.focus(), moviendo el cursor al campo de entrada.
function FocusInput() {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>Dar foco</button>
</>
);
}<select> usando useRefPara obtener la referencia de un elemento HTML como una lista <select> usando useRef, sigue este ejemplo.
Así, podrás acceder directamente al elemento, leer su valor o manipularlo sin desencadenar re-renderizados innecesarios.
import { useRef } from 'react';
function SelectPaises() {
const selectRef = useRef(null);
const handleSelectChange = () => {
alert(`País seleccionado: ${selectRef.current.value}`);
};
return (
<div>
<select ref={selectRef} onChange={handleSelectChange}>
<option value="venezuela">Venezuela</option>
<option value="mexico">México</option>
<option value="colombia">Colombia</option>
<option value="peru">Perú</option>
<option value="ecuador">Ecuador</option>
<option value="bolivia">Bolivia</option>
{/* Agrega más países aquí */}
</select>
<button onClick={() => alert(`País actual: ${selectRef.current.value}`)}>
Mostrar país actual
</button>
</div>
);
}const selectRef = useRef(null); crea una referencia que apunta al elemento <select>.ref del <select> para que selectRef.current apunte al elemento en el DOM.selectRef.current.value, puedes acceder al valor seleccionado sin necesidad de manejar el estado de React. El botón, por ejemplo, muestra el valor actual seleccionado en un alert.Puedes usar useRef para animar un elemento de manera directa.
import { useRef } from 'react';
function AnimateElement() {
const boxRef = useRef(null);
const handleAnimate = () => {
boxRef.current.style.transition = 'transform 1s';
boxRef.current.style.transform = 'translateX(200px)';
};
return (
<div>
<div ref={boxRef} style={{ width: '100px', height: '100px', backgroundColor: 'blue' }} />
<button onClick={handleAnimate}>Mover Caja</button>
</div>
);
}Útil para comparar valores actuales con anteriores.
Este componente en React muestra un contador (count) y su valor anterior (prevCountRef.current).
Cada vez que count cambia, useEffect actualiza el valor anterior para compararlo con el actual en el siguiente render.
function ComponenteConHistorial() {
const [count, setCount] = useState(0);
const prevCountRef = useRef();
useEffect(() => {
prevCountRef.current = count;
}, [count]);
return (
<div>
<p>Valor actual: {count}</p>
<p>Valor anterior: {prevCountRef.current}</p>
<button onClick={() => setCount(c => c + 1)}>
Incrementar
</button>
</div>
);
}useRef es perfecto para manejar intervalos y timeouts.
Este código implementa un temporizador que incrementa un contador cada segundo usando setInterval.
El useRef almacena el identificador del intervalo, lo que permite detenerlo limpiamente al desmontar el componente o al hacer clic en el botón “Detener”.
function Temporizador() {
const [count, setCount] = useState(0);
const intervalRef = useRef();
useEffect(() => {
intervalRef.current = setInterval(() => {
setCount(c => c + 1);
}, 1000);
return () => clearInterval(intervalRef.current);
}, []);
return (
<div>
<h1>Contador: {count}</h1>
<button onClick={() => clearInterval(intervalRef.current)}>
Detener
</button>
</div>
);
}Para debugging o monitoreo de rendimiento. Lleva la cuenta de cuántas veces se ha renderizado el componente, sin provocar re-renderizados adicionales.
La función ContadorRenders cuenta cuántas veces se renderiza el componente, usando useRef para almacenar el número de renders sin provocar re-renders adicionales.
Cada render incrementa renderCount.current en 1, y el botón permite actualizar el estado, desencadenando nuevos renders.
function ContadorRenders() {
const [estado, setEstado] = useState(0);
const renderCount = useRef(0);
useEffect(() => {
renderCount.current += 1;
});
return (
<div>
<p>Número de renders: {renderCount.current}</p>
<button onClick={() => setEstado(s => s + 1)}>
Actualizar estado
</button>
</div>
);
}const inputRef = useRef(null); // Para refs DOM
const countRef = useRef(0); // Para valores numéricosuseEffect(() => {
const id = setInterval(() => {}, 1000);
return () => clearInterval(id);
}, []);if (myRef.current) {
myRef.current.focus();
}useRef para valores que deban causar re-renderizados.current durante el renderizadouseRef es una herramienta poderosa en React cuando se usa correctamente. Es perfecta para: