¿Cuáles son los principales casos de uso de useRef?

Question

IT Interview Practice · Accepted Answer

`useRef` devuelve un contenedor mutable `{ current: ... }` que **persiste entre renders** pero que, fundamentalmente, **cambiarlo NO provoca un re-render**. Dos usos distintos:

## 1. Acceder a un nodo del DOM

```jsx
function SearchBox() {
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus(); // imperatively focus the input on mount
  }, []);
  return <input ref={inputRef} />;
}
```

## 2. Guardar un valor mutable entre renders

Úsalo para recordar algo sin provocar renders: ids de temporizadores, el valor anterior de una prop, una instancia de una librería:

```jsx
function Timer() {
  const intervalId = useRef(null);
  const start = () => {
    intervalId.current = setInterval(tick, 1000); // store across renders
  };
  const stop = () => clearInterval(intervalId.current);
}
```

## La distinción clave: ref vs. state

```jsx
const countRef = useRef(0);
countRef.current++;  // changes the value, but the UI does NOT update

const [count, setCount] = useState(0);
setCount(count + 1); // changes value AND re-renders
```

Así que la regla es: **si la UI debe reflejar el valor, usa state; si son solo datos "entre bastidores", usa un ref.** Leer o escribir `ref.current` durante el render está desaconsejado (hazlo en efectos o manejadores) porque los refs no son rastreados por el ciclo de renderizado de React.

1. Acceder a un nodo del DOM

2. Guardar un valor mutable entre renders

La distinción clave: ref vs. state

Preguntas relacionadas