Learn about useEffect hook in react

React-এ useEffect কেন ব্যবহার করবো?

React কম্পোনেন্টের একটি গুরুত্বপূর্ণ বৈশিষ্ট্য হল, এটি যেকোনো পরিবর্তনের পর পুরো কোডটিকে রি-রেন্ডার করে। তবে কিছু ক্ষেত্রে এমন প্রয়োজন হয়, যেখানে আমরা চাই না পুরো কোডটি বারবার রেন্ডার হোক, বরং নির্দিষ্ট কোনো ইভেন্ট বা শর্ত অনুযায়ী রেন্ডার হোক। এখানে useEffect হুকটির প্রয়োজন হয়। যেমনঃ

ধরুন, আমাদেরকে এসাইনমেন্ট দেওয়া হয়েছে, যেখানে ১০টি রিকোয়ারমেন্ট লেখা আছে। হঠাৎ জানতে পারলেন, ৬ নাম্বার রিকোয়ারমেন্টে কিছু আপডেট আনা হয়েছে।তাহলে নিশ্চয়ি আপনি প্রথমে পুরো ফাইলটি পড়ে দেখে নিবেন এবং কেবল ৬ নাম্বারটি আপডেট করবেন। এরপর আবার জানলেন, আরও কিছু পরিবর্তন আনা হয়েছে, কিন্তু কোনটাতে তা জানেন না, তাই আবার পুরো ফাইলটি পড়তে হবে।

React-ও এমনটি করে, এটি যেকোনো ছোট পরিবর্তনের জন্য পুরো কোডটি রেন্ডার করে এবং যেখানে প্রয়োজন সেখানে আপডেট করে। কিন্তু আমরা যদি চাই যে কিছু কোড শুধুমাত্র একবার রেন্ডার হোক, তখন useEffect ব্যবহার করা যায়।

যেমন, একটি বাটন আছে যা ক্লিক করলে ভ্যালু বাড়ে বা কমে। এখন যদি আমরা এটি console.log মেসেজ সরাসরি কোডে লিখি, তবে বাটনে প্রতিবার ক্লিক করলে সেই মেসেজ প্রিন্ট হবে,যতবার বাটনে ক্লিক করবো ততবার মেসেজ প্রিন্ট হবে। কারণ React পুরো কম্পোনেন্টটিই রি-রেন্ডার করছে। কিন্তু যদি আমরা console.log মেসেজটি useEffect এর মধ্যে রাখি এবং একটি ফাঁকা ডিপেনডেন্সি অ্যারে ([]) ব্যবহার করি, তাহলে এটি কেবল একবারই রেন্ডার হবে এবং বারবার প্রিন্ট হবে না।

useEffect কিভাবে কাজ করে?

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

useEffect কে আমি তিন ভাবে ব্যবহার করেছি। এবং আমি google থেকে এই তিনটিকেই খুঁজে পেয়েছি। তবে আরও থাকতে পারে:

1. ফাঁকা ডিপেনডেন্সি অ্যারে ([]) এই ক্ষেত্রে কোডটি শুধুমাত্র একবার রেন্ডার হবে।

2. নির্দিষ্ট ডিপেনডেন্সি দেওয়া। এই ক্ষেত্রে ডিপেনডেন্সির যে কোনো মান পরিবর্তন হলে useEffect রি-রেন্ডার হবে। অর্থাৎ ডিপেন্ডেন্সি অনুযায়ী রেন্ডার হবে।

3. কোনো ডিপেনডেন্সি ছাড়া। এই ক্ষেত্রে কম্পোনেন্টের প্রতিটি রেন্ডারে কোডটি চালু হবে। (এই ক্ষেত্রে Infinity loop তৈরি হয়।)

তো সংক্ষেপে বলা যায় যে,
useEffect ব্যবহার করে আপনি নির্দিষ্ট কিছু অংশের জন্য এই রেন্ডারিং কন্ট্রোল করতে পারেন।

React-এ কাজের সময় useEffect আপনাকে অনেক সুবিধা দিতে পারে, বিশেষত যখন আপনি চাচ্ছেন বারবার রেন্ডারিং এড়িয়ে চলতে।এবং রেন্ডারিংকে কন্ট্রোল করতে আপনার নিজের মনমত।

• রেন্ডারিং বলা হয় কোন কিছু শো করা বা দেখানোকে।