Separating Events from Effects
ইউজার যখন কোন ইন্টারেকশন করে তখন মূলত ইভেন্ট হ্যান্ডেলার রান হয়, যদি সেম ইন্টারেকশন আরেকবার করে তাহলে আরেকবার ইভেন্ট-হ্যান্ডেলার রি-রান হয়, কিন্তু ইফেক্ট শুধু তখনই রি-রান হয় যখন তার ডিপেন্ডেন্সি অ্যারেতে থাকা কোন ভ্যালু আগের রেন্ডার থেকে পরের রেন্ডারে চেঞ্জ হয়।
কখনো কখনো হয়তো আমরা দুইটা মিলিয়েই ব্যাবহার করবো,কিন্তু এই লেসনে আমরা শিখবো কিভাবে আমরা ইফেক্ট থেকে ইভেন্টগুলোকে আলাদা করবো।
Choosing between event handlers and Effects (কখন ইফেক্ট ব্যাবহার করবো আর কখন ইভেন্ট হ্যন্ডেলার ব্যাবহার করবো ?)
মনে করুন আপনি একটা চ্যাটরুম কম্পনেন্ট বানাচ্ছেন, এখন এক্ষেত্রে দুইটা রিকুয়ারমেন্ট আছে,
- আপনার কম্পোনেন্টকে অটোমেটিক ভাবে চ্যাটরুম সার্ভারের সাথে কানেক্টেড হতে হবে।
- যখন আপনি
Sendবাটনে ক্লিক করবেন,সুধুমাত্র তখনি মেসেজ সেন্ট হতে হবে।
এখন আপনি চিন্তা করেন কোনটা কোথায় রাখা উচিত।
অবশ্যই যেটা ক্লিক করার পর হবে সেটা হবে ইভেন্ট হ্যান্ডেলার, আর যেটা অটোমেটিক হবে সেটা হবে ইফেক্ট।
Reactive values and reactive logic (রিয়াক্টিভ ভ্যালু এবং রিয়াক্টিভ লজিক কি ?)
Reactive values
সাধারণ ভাবে আমরা বলতে পারি যে, ইভেন্ট-হ্যান্ডেলারগুলো ট্রিগার হয় ম্যানুয়ালি,যেমন কোন বাটনে ক্লিক করার পর কোন কিছু হবে, এটাকে আমরা ইভেন্ট বলতে পারি। অন্যদিকে যদি কোনকিছু অটোমেটিক করার প্রয়োজন হয়, তখন সেই অটোমেটিক কাজগুলো হবে ইফেক্ট।
প্রপ্স,স্টেট এবং ভ্যারিয়েবল যেগুলো কম্পোনেন্ট এর বডির ভিতরে ডিক্লেয়ার করা হয়েছে সেগুলো হলো রিয়াক্টিভ ভ্যালু।
const serverUrl = "https://localhost:1234";
function ChatRoom({ roomId }) {
const [message, setMessage] = useState("");
// ...
}এই উদাহরণে serverUrl কোন রিয়াক্টিভ ভ্যালু নয়, কেননা এটা কম্পোনেন্ট এর রেন্ডারিং এর বাহিরে ডেক্লেয়ার করা একটা স্ট্যাটিক ভ্যালু। এটি কম্পোনেন্টের রি-রেন্ডারে কখনই চেঞ্জ হবেনা। কিন্তু roomId, আর message কিন্তু রিয়াক্টিভ ভ্যালু । কেননা roomId প্রপ্স হিসেবে এসেছে আর message হলো একটা স্টেট ভ্যারিয়েবল। তাই দুইটাই রিয়াক্টিভ ভ্যালু।
reactive logic
-
Logic inside event handlers is not reactive ইভেন্ট হ্যান্ডেলারের ভিতরে লিখা লজিকগুলো কখনো রিয়াক্টিভ না, কেননা এগুলো কখনো অটোমেটিক কোন কিছু করবেনা, একমাত্র কোন একশন ট্রিগার হলেই লজিকগুলো এক্সিকিউট হবে।
-
Logic inside Effects is reactive এফেক্টের ভিতরে লিখা লজিকগুলো রিয়াক্টিভ। কেননা যদি ইফেক্টের ডিপেন্ডেন্সি এরের ভিতরে কোন কিছু রে-রেন্ডারে চেঞ্জ হয়,তাহলে ইফেক্টের ভিতরের লজিকগুলো অটোমেটিক রান হয়।
Extracting non-reactive logic out of Effects
কখনো কখনো ইফেক্টের ভিতরে নন-রিয়াক্টিভ লজিক লিখতে হতে পারে। কিন্তু এতে করে আবার আমদের এপ্লিকেশনের বিহেবিয়ার চেঞ্জ হয়ে যেতে পারে, মানে যেটা আমরা অটোমেটিক চাইনা, সেটাও অটোমেটিক কল হয়ে যেতে পারে,
এইরকম সিচুয়েশনে রিয়াক্টের একটা বিল্ট-ইন হুক যেটা useEffectEvent এখনো রিয়াক্টের স্টেবল ভার্সনে রিলিজ হয়নি,সেটা যখন স্টেবল ভার্সনের রিলিজ হবে তখন আমরা তা ব্যাবহার করতে পারবো। যেহেতু এটা এখনও স্টেবল ভার্সনের রিলিজ হয়নি, তাই এটার ডকুমেন্টেশন আমরা এখানে এড করছিনা। তবে আপনি চাইলে এই লিঙ্কে ক্লিক করে useEffectEvent সম্পর্কে বিস্তারিত জানতে পারেন (opens in a new tab)