Mitkä ovat useRef-hookin pääasiallisia käyttötapauksia?

Question

Accepted Answer

`useRef` palauttaa muuttuvan säilön `{ current: ... }`, joka **jatkuu renderöintien välillä**, mutta kriittisesti **sen muuttaminen EI laukaise uudelleen renderöintiä**. Kaksi erillistä käyttötapausta:

## 1. DOM-solmun käyttö

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

## 2. Muuttuvan arvon säilyttäminen renderöintien välillä

Käytä sitä muistamaan jotain ilman renderöintejä — ajastimen tunnisteita, propsin edellistä arvoa, kirjaston instanssia:

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

## Keskeinen ero: 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
```

Joten sääntö on: **jos käyttöliittymän pitäisi heijastaa arvoa, käytä state-tietoa; jos se on vain "taustalla" olevaa dataa, käytä ref-tunnisteita.** `ref.current`-tunnuksen lukeminen/kirjoittaminen renderöinnin aikana ei ole suositeltavaa (tee se effects/käsittelijöissä), koska ref-tunnisteita ei seurata Reactin renderöintisyklillä.