React Refs এবং useRef Hook ব্যবহার করা
React একটি ডিক্লেয়ারেটিভ (declarative) পদ্ধতি ব্যবহার করে। আপনি স্টেট (state) আপডেট করেন এবং React UI আপডেট করে। বেশিরভাগ কাজের জন্য এটিই যথেষ্ট।
কিন্তু মাঝে মাঝে আপনাকে Virtual DOM-এর বাইরে যেতে হতে পারে। আপনার সরাসরি একটি রিয়েল HTML এলিমেন্ট স্পর্শ করার প্রয়োজন হতে পারে। এখানেই Refs এবং useRef hook-এর প্রয়োজন হয়।
Ref কী? Ref হলো একটি পয়েন্টার। এটি React-কে সরাসরি একটি নেটিভ DOM নোডের সাথে যুক্ত করে।
useState-এর পরিবর্তে useRef কেন ব্যবহার করবেন? State আপডেট করলে re-render ট্রিগার হয়। এর মানে হলো React স্ক্রিনে কম্পোনেন্টটিকে পুনরায় আঁকে (redraw)। Ref আপডেট করলে re-render ট্রিগার হয় না। এটি এমন সব ভ্যালুর জন্য উপযুক্ত যা পরিবর্তিত হয় কিন্তু তাৎক্ষণিকভাবে UI-তে দেখানোর প্রয়োজন নেই।
সাধারণ ব্যবহারের ক্ষেত্রসমূহ: • স্বয়ংক্রিয়ভাবে একটি ইনপুট ফিল্ডে ফোকাস করা। • ভিডিও বা অডিও এলিমেন্ট নিয়ন্ত্রণ করা (play/pause)। • একটি এলিমেন্টের প্রস্থ বা উচ্চতা পরিমাপ করা। • ইন্টারভাল (intervals) বা টাইমআউটের (timeouts) জন্য টাইমার ID সংরক্ষণ করা।
useRef কীভাবে ব্যবহার করবেন:
- React থেকে
useRefইম্পোর্ট করুন। - এটি ইনিশিয়ালাইজ করুন:
const myRef = useRef(null)। - এটিকে একটি এলিমেন্টে যুক্ত করুন:
<input ref={myRef} />। - এর ভ্যালু অ্যাক্সেস করুন এভাবে:
myRef.current।
উদাহরণ ১: একটি ইনপুট স্বয়ংক্রিয়ভাবে ফোকাস করা
যখন একজন ব্যবহারকারী একটি পেজে প্রবেশ করেন, আপনি চান কার্সারটি টেক্সট বক্সে থাকুক। কম্পোনেন্ট মাউন্ট হওয়ার পরে myRef.current.focus() কল করার জন্য আপনি useEffect ব্যবহার করবেন।
উদাহরণ ২: একটি স্টপওয়াচ
আপনি যদি একটি setInterval ID স্টেট-এ সংরক্ষণ করেন, তবে প্রতিবার টাইমার টিক দেওয়ার সময় কম্পোনেন্টটি re-render হবে। এটি ধীরগতির। আপনি যদি ID-টি একটি ref-এ সংরক্ষণ করেন, তবে কম্পোনেন্টটি দ্রুত থাকবে। ব্রাউজারের ওপর অতিরিক্ত চাপ না ফেলে রেন্ডারের মধ্যেও ভ্যালুটি সুরক্ষিত থাকে।
State বনাম Ref: • State: re-render ট্রিগার করে। UI ডেটার জন্য ব্যবহৃত হয়। আপডেটগুলো asynchronous। • Ref: re-render করে না। DOM অ্যাক্সেস এবং মেমরির জন্য ব্যবহৃত হয়। আপডেটগুলো synchronous।
সিনিয়রদের জন্য প্রো টিপস (Pro Tips):
• অতিরিক্ত ব্যবহার এড়িয়ে চলুন। শুধুমাত্র তখনই ref ব্যবহার করুন যখন ডিক্লেয়ারেটিভ লজিক কাজ করে না।
• মেমরি ক্লিনআপ করুন। আপনার ক্লিনআপ ফাংশনে (cleanup function) সর্বদা ইন্টারভাল বা ইভেন্ট লিসেনারগুলো ক্লিয়ার করুন।
• রেন্ডারিং চলাকালীন ref-এ কিছু লিখবেন না। শুধুমাত্র useEffect বা ইভেন্ট হ্যান্ডলারের ভেতরে ref.current আপডেট করুন। এটি সাইড ইফেক্ট (side effects) প্রতিরোধ করে।
• forwardRef ব্যবহার করুন। আপনি যদি একটি কাস্টম চাইল্ড কম্পোনেন্টে ref পাস করতে চান, তবে আপনাকে সেই চাইল্ডটিকে React.forwardRef দিয়ে র্যাপ (wrap) করতে হবে।
উৎস: https://dev.to/banti_kevat_8e2d123bb7994/react-me-refs-aur-useref-hook-kaise-use-karein-2dde