কিভাবে প্রতিক্রিয়া ব্যবহার ইফেক্ট ব্যবহার করবেন

এটি আমাদের বোতামটি DOM-এ রেন্ডার করে। useEffect সংজ্ঞায়িত করার আগে, আমরা useState Hook সংজ্ঞায়িত করে আমাদের প্রাথমিক অবস্থা সেট করতে পারি।

const [count, setCount] =useState(0);

এই সিনট্যাক্স ব্যবহার করে, প্রতিক্রিয়া প্রথম ভেরিয়েবলটিকে প্রাথমিক অবস্থায় সেট করে। এই ক্ষেত্রে, "গণনা" পরিবর্তনশীলটি useState-এ পাস করা আর্গুমেন্ট দ্বারা সেট করা হয়। প্রতিক্রিয়া আমাদের গণনার প্রাথমিক অবস্থা 0 এ সেট করেছে। দ্বিতীয় ভেরিয়েবলটি গণনা আপডেট করার জন্য একটি ফাংশন হিসাবে ব্যবহার করা হবে।

এখন যেহেতু আমরা গণনার একটি প্রাথমিক অবস্থা 0 তে সেট করেছি, আমরা আমাদের সেটকাউন্ট ফাংশনটি রাজ্যটি আপডেট করতে ব্যবহার করতে পারি।

const ButtonCounter =() => { const [count, setCount] =useState(0); প্রত্যাবর্তন ( 
 

আপনি বোতামটি {count} বার ক্লিক করেছেন
  setCount(count + 1)}>Click Me 
 )} 

 আমাদের onClick সম্পত্তিতে একটি কলব্যাক ফাংশন হিসাবে আমাদের setCount ব্যবহার করে, আমরা প্রতিবার বোতামটি ক্লিক করার সময় DOM আপডেট করতে পারি। 
 
  

 এর মানে হল আমাদের setCount ফাংশন যেমন সংজ্ঞায়িত করা হয় যখন useState-এর সাথে আমাদের প্রাথমিক অবস্থা সেট করে কাজ করছে! এখন আমরা ইউজস্টেট হুকের সিনট্যাক্স দেখেছি, আসুন ইউজ ইফেক্ট দেখি। 
 
ইফেক্ট সিনট্যাক্স ব্যবহার করুন
 

 আগেই বলা হয়েছে, useEffect পার্শ্ব প্রতিক্রিয়ার ব্যবহারকে সংজ্ঞায়িত করে। ডেটা আনয়ন এবং ম্যানুয়াল DOM পরিবর্তনের মাধ্যমে উপাদানগুলির পরিবর্তনগুলি পার্শ্ব প্রতিক্রিয়া গঠন করে। প্রতিবার কম্পোনেন্ট রেন্ডার করার সময় ইউজ ইফেক্ট হুক বলা হয়। 
 
 

 এটি প্রতিক্রিয়া ক্লাসের উপাদানগুলিতে componentDidMount এবং componentDidUpdate এর অনুরূপভাবে কাজ করে। আমাদের পাল্টা উদাহরণের সাথে এগিয়ে যেতে, আমরা আমাদের 

 উপাদানে একটি নাম প্রদর্শন করে আমাদের DOM আপডেট ব্যবহার করব। 
 
 
const [count, setCount] =useState(0); const [name, setName] =useState(" "); useEffect(() => { setName(name + "Ryan") }) রিটার্ন ( 
 

হ্যালো {name}! আপনি {count} বার ক্লিক করেছেন
  setCount (গণনা + 1)}>আমাকে ক্লিক করুন 
 )}
 

 এটি ইচ্ছাকৃতভাবে ভুল কোড করা হয়েছে। DOM-এ যা পুশ করা হয় তা প্রমাণ করে UseEffect কে কম্পোনেন্টের প্রতিটি রেন্ডারের সাথে বলা হয়। 
 
  

 এটি ঘটছে কারণ ডিফল্টরূপে, useEffect Hook componentDidMount এবং componentWillUpdate-এর সমন্বয়ের মতো আচরণ করে। 
 
 

 কম্পোনেন্ট মাউন্ট হলেই আমাদের হুককে রেন্ডার করার জন্য কাস্টমাইজ করার জন্য, আমরা ইফেক্ট ব্যবহার করার জন্য একটি দ্বিতীয় আর্গুমেন্ট পাঠাতে পারি। দ্বিতীয় আর্গুমেন্ট হিসাবে useEffect একটি খালি অ্যারে ([]) পাস করে, কম্পোনেন্ট মাউন্ট হলেই React শুধুমাত্র useEffect কল করতে জানে। 
 
 
useEffect(() => { setName(name + "Ryan") }, [])
 

 এখন, আমাদের ফাংশনাল কম্পোনেন্ট মাউন্ট হওয়ার পরেই "Ryan" স্ট্রিংটি প্রদর্শিত হবে। 
 
  

 দারুণ! হুক ব্যবহারে অভ্যস্ত হতে কিছুটা সময় লাগবে। এটি মাথায় রেখে, অফিসিয়াল রিঅ্যাক্ট ডকুমেন্টেশনে হুকস ব্যবহার করার জন্য একটি আপডেট গাইড রয়েছে। এখানে এটি পড়ুন. 
 
উপসংহার
 

 প্রতিক্রিয়া ব্যবহার ইফেক্ট হুকের এই ভূমিকাতে, আমরা হুকগুলি কী এবং কীভাবে সেগুলি ব্যবহার করতে হয় তা শিখেছি। আমরা প্রতিটির জন্য একটি প্রাথমিক উদাহরণ সহ useState এবং useEffect Hooks-এর সিনট্যাক্সও কভার করেছি। 
 
 

 হুকগুলির সম্ভাব্য ব্যবহারগুলি এই প্রাইমারে যা আচ্ছাদিত করা হয়েছে তার থেকে অনেক বেশি। এটি পড়ার পরে এবং আপনার নিজের কোডে কিছু সময় ব্যয় করার পরে, রিঅ্যাক্ট হুক্সের উপর আপনার উপলব্ধি আরও গভীর করতে লিঙ্কযুক্ত সংস্থানগুলিতে শাখা করুন। যদিও ক্লাসের উপাদানগুলি কোথাও যাচ্ছে না, হুকগুলি হল প্রতিক্রিয়ার ভবিষ্যত, তাই তাদের সম্পর্কে অবগত থাকুন এবং আপ টু ডেট থাকুন!