Separating Events from Effects

ইভেন্ট আর ইফেক্ট আলাদা করার সহজ পদ্ধতি

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

আর, এমন কিছু ব্যাপার থাকে যেগুলো নিজে নিজেই ঘটতে থাকে, যেমন একটা ডাটা ফেচ করা বা ইউজারের স্ক্রিনে কিছু রিফ্রেশ হওয়া। এই ধরণের কাজ করার জন্য আমরা ইফেক্ট ব্যবহার করি।

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

ইভেন্ট হ্যান্ডলার আর ইফেক্ট কখন ব্যবহার করবো?

তুমি যদি চ্যাটরুম অ্যাপ বানাতে যাও, তখন নিচের দুটি প্রয়োজনীয় ফিচার থাকবে:

1. কম্পোনেন্ট যখন লোড হবে, তখন অটো চ্যাট সার্ভারের সাথে কানেক্ট করতে হবে।
2. যখন ইউজার "Send" বাটনে ক্লিক করবে, তখন মেসেজ পাঠাতে হবে।

এখন ভেবে দেখো, কোনটা ইভেন্ট হ্যান্ডলার আর কোনটা ইফেক্ট?

• ইভেন্ট হ্যান্ডলার: যখন ইউজার ক্লিক করবে (Send বাটন)।
• ইফেক্ট: যখন কম্পোনেন্ট লোড হবে (অটো কানেকশন)।

রিয়াক্টিভ ভ্যালু আর রিয়াক্টিভ লজিক কী?

রিয়াক্টিভ ভ্যালু

রিয়াক্টিভ ভ্যালু মানে হলো যেসব ভ্যারিয়েবল রি-রেন্ডারে চেঞ্জ হতে পারে।

উদাহরণ:

const serverUrl = "https://localhost:1234";
 
function ChatRoom({ roomId }) {
    const [message, setMessage] = useState("");
    // ...
}

এখানে:

• serverUrl রিয়াক্টিভ ভ্যালু না। কারণ এটা কম্পোনেন্টের বাইরে ডিক্লেয়ার করা হয়েছে এবং কখনো চেঞ্জ হবে না।
• roomId এবং message রিয়াক্টিভ ভ্যালু। কারণ roomId প্রপ্স থেকে এসেছে এবং message একটা স্টেট ভ্যারিয়েবল। এরা রি-রেন্ডারে চেঞ্জ হতে পারে।

রিয়াক্টিভ লজিক

• ইভেন্ট হ্যান্ডলারের ভিতরের লজিক রিয়াক্টিভ না।
  যেমন, তুমি যখন কোনো বাটনে ক্লিক করবে, তখনই এটা রান করবে।

• ইফেক্টের ভিতরের লজিক রিয়াক্টিভ।
  কারণ যদি এর ডিপেন্ডেন্সি (যেমন প্রপ্স বা স্টেট) চেঞ্জ হয়, তাহলে ইফেক্ট অটোমেটিক রান করবে।

ইফেক্ট থেকে নন-রিয়াক্টিভ লজিক আলাদা করা

ধরো, তুমি এমন কোনো লজিক লিখেছ যেটা ইফেক্টের ভেতরে আছে, কিন্তু এটা রিয়াক্টিভ না। তখন একটা সমস্যা হবে—এই লজিক অপ্রয়োজনীয়ভাবে অটোমেটিক রান হতে পারে।

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

সহজভাবে বুঝে রাখো:

• ইভেন্ট হ্যান্ডলার: ম্যানুয়ালি কোনো কাজ করাতে চাইলে ব্যবহার করো।
• ইফেক্ট: অটোমেটিক কোনো কাজ করাতে চাইলে ব্যবহার করো।