Koja su glavna područja primjene za useRef?

Question

IT Interview Practice · Accepted Answer

`useRef` vraća mutable spremniku `{ current: ... }` koji **ostaje isti tijekom rendera** ali, što je važno, **promjena njega NE aktivira ponovno rendir**. Dva različita korištenja:

## 1. Pristup DOM čvoru

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

## 2. Zadržati mutable vrijednost između rendera

Koristite je za pamćenje nečega bez aktiviranja rendera — timer ids, prethodnu vrijednost svojstva, instancu biblioteke:

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

## Ključna razlika: ref nasuprot 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
```

Dakle, pravilo je: **ako korisničko sučelje trebalo odražavati vrijednost, koristite state; ako je to samo "iza scene" podatak, koristite ref.** Čitanje/pisanje `ref.current` tijekom rendera se ne preporučuje (učinite to u effects/handlers) jer refs nisu praćeni React-ovim ciklus rendera.

1. Pristup DOM čvoru

2. Zadržati mutable vrijednost između rendera

Ključna razlika: ref nasuprot state

Povezana pitanja