React-এ রেফের সাথে কাজ করার জন্য useRef হুক

এই পাঠে আমরা রেফ নিয়ে কাজ করব। স্পষ্টতার জন্য আসুন useState হুকের সাথে তুলনা করে useRef হুকের কাজ পরীক্ষা করি।

আসুন একটি বাটন সহ একটি কম্পোনেন্ট তৈরি করি:

return (
	<div>
		<button>
			state click
		</button>
	</div>
);

কম্পোনেন্টে useState ইম্পোর্ট করি:

import { useState } from 'react';

এবং একটি state স্টেট তৈরি করি:

const [state, setState] = useState(0);

এবং এখন এমন করি যাতে বাটনে ক্লিক করলে আমাদের state 1 দ্বারা বৃদ্ধি পায়। স্টেটের মান আমরা সরাসরি বাটনের টেক্সটে প্রদর্শন করব:

<button onClick={handleStateClick}>
	state click: {state}
</button>

বাটনে ক্লিক হ্যান্ডেল করার জন্য handleStateClick ফাংশনটি বর্ণনা করি:

function handleStateClick() {
	setState(state + 1);
}

বাটনটি ক্লিক করি এবং দেখি কিভাবে স্টেটের মান বৃদ্ধি পায়।

এবং এখন আসুন App কম্পোনেন্টটি তৈরি করি, কিন্তু স্টেট ব্যবহার না করে, একটি রেফ ব্যবহার করি।

প্রথমে, কম্পোনেন্টে useRef ইম্পোর্ট করি:

import { useRef } from 'react';

এবং একটি ref রেফ তৈরি করি। useRef হুক তার ফলাফল হিসেবে রেফের একটি অবজেক্ট ফেরত দেয় যার একটি মাত্র প্রপার্টি current, যা আমাদের জন্য পরবর্তীতে আগ্রহের বিষয় হবে। এর প্রারম্ভিক মান 0 সেট করি:

const ref = useRef(0);

বাটনে ক্লিক হ্যান্ডেলার যুক্ত করি। মনে রাখবেন, আমাদের ref নিজে পড়া/পরিবর্তন করা উচিত নয়, এর current প্রপার্টিটি পড়া/পরিবর্তন করা উচিত:

<button onClick={handleRefClick}>
	ref click: {ref.current}
</button>

আমাদের বাটনে ক্লিক হ্যান্ডেল করার জন্য ফাংশন যোগ করি। এখানে আমরা আগের উদাহরণের স্টেটের মতোই current কে 1 দ্বারা বৃদ্ধি করব। স্টেটের থেকে ভিন্ন, যেখানে এর মান পরিবর্তন করার জন্য setState ফাংশনের প্রয়োজন হয়, রেফের প্রপার্টির সাথে আমরা সরাসরি কাজ করি:

function handleRefClick() {
	ref.current = ref.current + 1;
}

এখন আমাদের বাটনে ক্লিক করি। এবং কি দেখি? এতে ক্লিক করলে, যেমন আমরা শুরুতে 0 দেখতাম, তেমনই থাকে এবং পরিবর্তন হয় না।

আপনি, অবশ্যই, সন্দেহ করতে পারেন যে মানটি আদৌ পরিবর্তন হচ্ছে কিনা। আসুন এটি পরীক্ষা করে দেখি। এর জন্য ক্লিক হ্যান্ডেলার ফাংশনে current এর মান কনসোলে প্রিন্ট করার জন্য আরও একটি কোড লাইন যোগ করি:

function handleRefClick() {
	ref.current = ref.current + 1;
	console.log('ref click: ' + ref.current);
}

এবং এখন, ব্রাউজারে কনসোল খুলে, আবার বাটনে ক্লিক করি এবং নিশ্চিত হই যে মানটি সত্যিই প্রতিটি ক্লিকে পরিবর্তিত হচ্ছে এবং কোনো ধোঁকা নেই।

এখন আমরা দেখতে পাই যে স্টেটের থেকে ভিন্ন, রেফের মান পরিবর্তন করলে কম্পোনেন্টের রেন্ডার ঘটে না। তাই আমরা প্রতিবার বাটনের টেক্সটে প্রারম্ভিক মান 0 দেখি।

এইভাবে, যদি আপনার ডেটা রেন্ডারিং এর জন্য ব্যবহার করা হয়, তবে এটিকে স্টেটে সংরক্ষণ করুন, এবং যদি আপনার রেন্ডারিং এর প্রয়োজন না হয়, সেক্ষেত্রে রেফের ব্যবহার আরও কার্যকর হতে পারে।

ধরুন আপনার কম্পোনেন্টে 'text' টেক্সট সহ একটি প্যারাগ্রাফ এবং একটি বাটন আছে। এমন করুন যাতে বাটনে ক্লিক করলে প্রতিবার প্যারাগ্রাফের টেক্সটের শেষে একটি বিস্ময়বোধক চিহ্ন যোগ হয়। এটি স্টেট ব্যবহার করে করুন।

App কম্পোনেন্ট তৈরি করুন, কিন্তু স্টেটের পরিবর্তে এখন রেফ ব্যবহার করুন। নিশ্চিত হন যে বাটন চাপলে প্যারাগ্রাফের টেক্সট পরিবর্তন হবে না। প্যারাগ্রাফের টেক্সট কনসোলে প্রিন্ট করাও যোগ করুন, এটি খুলে নিশ্চিত হন, যে আসলে টেক্সট পরিবর্তন হচ্ছে।