Je! Kuna matumizi gani makuu ya useRef?

Question

IT Interview Practice · Accepted Answer

`useRef` inajenga kontena yanayoweza kubadilika `{ current: ... }` inayobaki **katika maboresho** lakini, muhimu sana, **kuibadilisha HAISEMI hadisi mpya**. Matumizi mawili tofauti:

## 1. Kupata nodi ya DOM

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

## 2. Shikilia thamani yanayoweza kubadilika katika maboresho

Itumie ili kukumbuka kitu bila kusababisha maboresho — timer ids, thamani ya awali ya prop, mfano wa maktaba:

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

## Tofauti muhimu: 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
```

Kwa hiyo sheria ni: **ikiwa UI inapaswa kuonyesha thamani, tumia state; ikiwa ni data tu "nyuma ya kulisanisha", tumia ref.** Kusoma/kuandika `ref.current` wakati wa kujenga kunakosezwa (fanya kwa athari/madereva) kwa sababu refs hazienezi na chetani cha kujenga kwa React.

1. Kupata nodi ya DOM

2. Shikilia thamani yanayoweza kubadilika katika maboresho

Tofauti muhimu: ref vs state

Maswali yanayohusiana