Quels sont les principaux cas d'usage de useRef ?

Question

IT Interview Practice · Accepted Answer

`useRef` retourne un conteneur mutable `{ current: ... }` qui **persiste à travers les rendus**, mais de manière cruciale, **le modifier ne déclenche PAS un nouveau rendu**. Deux usages distincts :

## 1. Accéder à un nœud DOM

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

## 2. Conserver une valeur mutable entre les rendus

Utilisez-le pour mémoriser quelque chose sans déclencher de rendus — des identifiants de minuterie, la valeur précédente d'une prop, une instance d'une bibliothèque :

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

## Pourquoi c'est important

```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
```

Donc la règle est : **si l'interface utilisateur doit refléter la valeur, utilisez state ; si c'est juste des données "en arrière-plan", utilisez une ref.** Lire/écrire `ref.current` lors du rendu est déconseillé (faites-le dans les effects/handlers) car les refs ne sont pas suivies par le cycle de rendu de React.

1. Accéder à un nœud DOM

2. Conserver une valeur mutable entre les rendus

Pourquoi c'est important

Questions connexes