Wadanne suke babbar lokacin amfani da useRef?

Question

Accepted Answer

`useRef` yana koma kabin da za a iya canja `{ current: ... }` wanda **ya tsaya a jiya wajen fita** amma, mahimmanci ne, **canja akan shi ba ya bugi sake fita**. Aiki guda biyu na iyar jiya:

## 1. Samun DOM node

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

## 2. Riƙe da kimar da za a iya canja a tsakanin fita

Samna don tuna wani abu ba tare da bugi fita — timer ids, jimlar kafa kafin, misalin gida:

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

## Bambancin mahimmanci: 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
```

Don haka dokar ke nan: **idan UI ya kamata nuni da kimar, samu state; idan ita ce "bayan gida" bayanai, samu ref.** Karantarwa/rubutarwa `ref.current` a lokacin fita ba a yardi shi (yi shi a cikin tasiri/masu gudanarwa) saboda refs ba a gano su ta hanyar React jiya.