ما هي حالات الاستخدام الرئيسية لـ useRef؟

Question

Accepted Answer

`useRef` يرجع حاوية قابلة للتغيير `{ current: ... }` التي **تستمر عبر عمليات إعادة التصيير** لكن، بشكل حاسم، **تغييرها لا يؤدي إلى إعادة تصيير**. هناك استخدامان متميزان:

## 1. الوصول إلى عقدة DOM

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

## 2. الاحتفاظ بقيمة قابلة للتغيير بين عمليات إعادة التصيير

استخدمه لتذكر شيء ما دون التسبب في إعادة تصيير — معرفات المؤقتات، القيمة السابقة للدعامة، مثيل من مكتبة:

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

## التمييز الرئيسي: ref مقابل 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
```

إذن القاعدة هي: **إذا كان يجب أن تعكس الواجهة القيمة، استخدم state؛ إذا كانت مجرد بيانات "خلف الكواليس"، استخدم ref.** قراءة أو كتابة `ref.current` أثناء التصيير غير مستحسنة (افعلها في effects/handlers) لأن refs لا يتم تتبعها بواسطة دورة التصيير في React.