Apakah kegunaan utama useRef?

Question

IT Interview Practice · Accepted Answer

`useRef` mengembalikan kontainer yang dapat dimutasi `{ current: ... }` yang **tetap ada di seluruh render** tetapi, secara kritikal, **mengubahnya TIDAK memicu re-render**. Dua kegunaan yang berbeda:

## 1. Akses node DOM

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

## 2. Tahan nilai yang dapat dimutasi antara render

Gunakan untuk mengingat sesuatu tanpa menyebabkan render — timer ids, nilai prop sebelumnya, instance perpustakaan:

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

## Perbedaan kunci: 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
```

Jadi aturannya ialah: **jika UI harus mencerminkan nilai, gunakan state; jika hanya "di balik layar" data, gunakan ref.** Membaca/menulis `ref.current` selama render tidak disarankan (lakukan di effects/handlers) karena refs tidak dilacak oleh siklus render React.

1. Akses node DOM

2. Tahan nilai yang dapat dimutasi antara render

Perbedaan kunci: ref vs state

Soalan berkaitan