১. রিরিয়াক্টিভ ভ্যালু (Reactive Value) কী?

রিয়াক্টিভ ভ্যালু হল সেই ভ্যালু যেগুলো পরিবর্তিত হতে পারে এবং যেগুলোর পরিবর্তন কম্পোনেন্টের UI তে প্রতিফলিত হয়। React এর মধ্যে, যেসব ভ্যারিয়েবল কম্পোনেন্টের স্টেট বা প্রপস (props) হিসেবে থাকে, তারা রিয়াক্টিভ হয়, কারণ এরা যখন পরিবর্তিত হয়, তখন React স্বয়ংক্রিয়ভাবে কম্পোনেন্টের UI আপডেট করে।

উদাহরণ:

• স্টেট (State): যখন তুমি useState হুক দিয়ে কোনো ভ্যারিয়েবল তৈরি করো এবং সেটার মান পরিবর্তন হয়, সেটা রিয়াক্টিভ হয়ে যায়।
• প্রপস (Props): যখন প্যারেন্ট কম্পোনেন্ট কোনো ভ্যালু চাইল্ড কম্পোনেন্টে পাঠায়, সেটা প্রপস হয়ে যায় এবং এই প্রপসের মান পরিবর্তন হলে চাইল্ড কম্পোনেন্টের UI তে পরিবর্তন আসে।

২. useEffect কী?

React এ useEffect হুক ব্যবহার করা হয়, এমন কাজ করার জন্য যেগুলো কম্পোনেন্ট রেন্ডার হওয়ার পরে বা কম্পোনেন্ট আনমাউন্ট হওয়ার আগে করতে হয়। উদাহরণস্বরূপ:

• ডাটা লোডিং: কম্পোনেন্ট মাউন্ট হওয়ার পর API থেকে ডাটা নিয়ে আসা।
• কানেকশন তৈরি বা বন্ধ করা: ওয়েবসকেট কানেকশন বা অন্য কোনো সিস্টেমের সাথে কানেকশন শুরু বা শেষ করা।

এফেক্ট যখন চালানো হয়, তখন এটি কিছু নির্দিষ্ট ভ্যালুর উপর ভিত্তি করে কাজ করে, যেগুলো ডিপেন্ডেন্সি আ্যরেতে রাখা হয়। ডিপেন্ডেন্সি আ্যরে বলতে হচ্ছে সেই ভ্যালুগুলো যেগুলোর মান যদি পরিবর্তিত হয়, তাহলে useEffect আবার রান করবে।

৩. কেন useEffect এর ডিপেন্ডেন্সি নির্ধারণ করতে হয়?

useEffect হুকের কাজ সঠিকভাবে করতে হলে, আমাদের ডিপেন্ডেন্সি আ্যরে ঠিকভাবে দিতে হয়। যদি আমরা এফেক্টে কোনো ভ্যারিয়েবল ব্যবহার করি, যেটির মান যদি কখনও পরিবর্তিত হয়, তাহলে সে ভ্যারিয়েবলকে ডিপেন্ডেন্সি আ্যরেতে রাখতে হয়।

অন্যথায়, যদি আমরা ভুল করে কোনো রিয়াক্টিভ ভ্যালু ডিপেন্ডেন্সিতে না রাখি, তাহলে সেই ভ্যালুর পরিবর্তন পরেও useEffect রান হবে না, যা আমাদের কাঙ্খিত আচরণের সাথে মেলে না।

উদাহরণ:

const serverUrl = "https://localhost:1234"; // Static value
function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [roomId]); // roomId is the dependency here
  // ...
}

এখানে, আমরা একটি ChatRoom কম্পোনেন্ট তৈরি করেছি। এখানে serverUrl একটি স্ট্যাটিক ভ্যালু (যেটি কম্পোনেন্টের বাইরে ডিক্লেয়ার করা) এবং roomId একটি রিয়াক্টিভ ভ্যালু, কারণ roomId কম্পোনেন্টের প্রপ হিসেবে এসেছে এবং এটি পরিবর্তিত হতে পারে। আমরা useEffect এর ডিপেন্ডেন্সি আ্যরেতে শুধু roomId রেখেছি।

কেন serverUrl ডিপেন্ডেন্সিতে রাখিনি?

কারণ:

• serverUrl কখনও পরিবর্তিত হবে না। এটা একবার ডিক্লেয়ার হওয়ার পর স্থির (static) থাকবে।
• কিন্তু roomId যেহেতু একটি প্রপ হিসেবে আসে, এবং এটি পরিবর্তিত হতে পারে, তাই roomId কে ডিপেন্ডেন্সি হিসেবে রাখতে হবে, যাতে যখন roomId পরিবর্তিত হয়, তখন useEffect আবার রান হয়।

৪. এফেক্টের ফাঁকা ডিপেন্ডেন্সি

যদি তুমি চাও যে একটি এফেক্ট শুধুমাত্র একবার রান হোক, অর্থাৎ কম্পোনেন্ট মাউন্ট হওয়ার সময় এবং কম্পোনেন্ট আনমাউন্ট হওয়ার সময় কানেকশন তৈরি বা বন্ধ হোক, তাহলে তুমি useEffect এর ডিপেন্ডেন্সি আ্যরে ফাঁকা রেখে দিতে পারো ([]), যার মানে হবে:

const serverUrl = "https://localhost:1234";
const roomId = "general";
 
function ChatRoom() {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, []); // Empty dependency array means it runs only once on mount
  // ...
}

এখানে:

• useEffect শুধুমাত্র একবার রান করবে, কম্পোনেন্ট প্রথমবার যখন মাউন্ট হবে।
• ডিপেন্ডেন্সি আ্যরে ফাঁকা হওয়ায়, roomId বা serverUrl এর মান পরিবর্তন হলেও এটি useEffect এর রানিং এ কোন পরিবর্তন আনবে না।
• এফেক্টটি কম্পোনেন্ট মাউন্ট হওয়ার সময় চালু হবে এবং কম্পোনেন্ট আনমাউন্ট হওয়ার সময় বন্ধ হবে।

৫. কম্পোনেন্টের ভিতরে ডিক্লেয়ার করা ভ্যারিয়েবলগুলোও রিয়াক্টিভ হয়

এটা মনে রাখো, শুধু প্রপস আর স্টেটই রিয়াক্টিভ নয়, যেসব ভ্যারিয়েবল তুমি কম্পোনেন্টের ভিতরে ডিক্লেয়ার করো, সেগুলোও যদি কম্পোনেন্টের রেন্ডারিং এর সাথে সম্পর্কিত হয়, তাহলে সেগুলোও রিয়াক্টিভ হয়ে যায়।

যদি এমন হয়, যে ভ্যারিয়েবলটি তুমি কম্পোনেন্টের ভিতরে ডিক্লেয়ার করেছ এবং তার মান পরিবর্তন হতে পারে, তখন সেটি রিয়াক্টিভ হিসেবে গণ্য হবে।

৬. React এর linter কী কাজ করে?

React এর সাথে যদি তুমি eslint ব্যবহার করো, তবে এটি তোমাকে সতর্ক করবে যদি তুমি কোন রিয়াক্টিভ ভ্যালু ব্যবহার করো এবং সেটি ডিপেন্ডেন্সিতে যুক্ত না করো। linter তুমাকে বলে দেবে, যেন তুমি সবসময় সেই রিয়াক্টিভ ভ্যালুগুলো ডিপেন্ডেন্সি আ্যরেতে যোগ করো, যাতে এফেক্টটি সঠিকভাবে কাজ করে।

সারাংশ:

1. রিয়াক্টিভ ভ্যালু এমন ভ্যালু যেগুলোর মান পরিবর্তিত হয় এবং যেগুলোর পরিবর্তন কম্পোনেন্টের UI তে প্রতিফলিত হয়।
2. useEffect এর ডিপেন্ডেন্সি আ্যরেতে শুধুমাত্র সেই ভ্যালুগুলো রাখতে হয়, যেগুলো পরিবর্তিত হলে useEffect আবার রান করবে।
3. যদি কোনো ভ্যালু পরিবর্তিত না হয়, তবে তাকে ডিপেন্ডেন্সিতে রাখার প্রয়োজন নেই।
4. linter আমাদের সাহায্য করে ভুল ডিপেন্ডেন্সি থেকে রক্ষা পেতে।

এইভাবে যদি তুমি React এর useEffect এবং ডিপেন্ডেন্সি নিয়ে চিন্তা করো, তাহলে তোমার কোড আরও পরিষ্কার এবং সঠিক হবে!