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. রেন্ডারগুলির মধ্যে একটি পরিবর্তনশীল মান ধরে রাখা

রেন্ডার ছাড়াই কিছু মনে রাখার জন্য এটি ব্যবহার করুন — টাইমার ids, একটি prop এর পূর্ববর্তী মান, একটি লাইব্রেরির একটি instance:

```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
```

তাই নিয়মটি হল: **যদি UI মানটি প্রতিফলিত করা উচিত, state ব্যবহার করুন; যদি এটি শুধু "পর্দার পেছনে" ডেটা হয়, একটি ref ব্যবহার করুন।** রেন্ডারের সময় `ref.current` পড়া/লেখা অনুৎসাহিত করা হয় (এটি effects/handlers এ করুন) কারণ refs React এর রেন্ডার চক্র দ্বারা ট্র্যাক করা হয় না।