რა არის useRef-ის მთავარი გამოყენების შემთხვევები?

Question

Accepted Answer

`useRef` აბრუნებს ცვალებად კონტეინერს `{ current: ... }` რომელიც **რენდერების შორის ხელმისაწვდომი რჩება**, მაგრამ, კრიტიკულად, **მის შეცვლა არ აწვდის re-render-ს**. ორი განსხვავებული გამოყენება:

## 1. დაჯდომეთ DOM კვანძზე

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

## 2. ცვალებადი მნიშვნელობის ჩატარება რენდერებს შორის

გამოიყენეთ რაღაც დამახსოვრებისთვის რენდერის გამოწვევის გარეშე — timer ids, prop-ის წინა მნიშვნელობა, ბიბლიოთეკის ინსტანცია:

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

## ძირითადი განსხვავება: 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
```

ასე რომ წესი ასეთია: **თუ UI უნდა ასახოს მნიშვნელობა, გამოიყენეთ state; თუ ეს მხოლოდ "უკან რეჟიმში" მონაცემებია, გამოიყენეთ ref.** `ref.current`-ის კითხვა/წერა რენდერის დროს არ რეკომენდირებულია (გააკეთეთ effects/handlers-ში) რადგან refs არ მიჰყვება React-ის რენდერის ციკლს.