React-এ স্টেটের রিঅ্যাকটিভিটি

আসুন এখন দেখি কিভাবে রিঅ্যাকটিভিটি কাজ করে। এটি নিশ্চিত করে যে স্টেট পরিবর্তন হলে পরিবর্তনগুলি তাৎক্ষণিকভাবে স্ক্রিনে প্রদর্শিত হয়।

আসুন একটি উদাহরণ দিয়ে দেখি। ধরুন আমাদের কাছে পণ্যের নাম সহ একটি স্টেট আছে:

jsxconst [name, setName] = useState('prod');

আসুন মার্কআপে পণ্যের নামটি আউটপুট করি:

jsxreturn <div>
  <span>{name}</span>
</div>;

এখন একটি বাটন তৈরি করি, ক্লিক করলে যেটি আমাদের স্টেট পরিবর্তন করবে:

jsxreturn <div>
  <span>{name}</span>
  <button onClick={clickHandler}>btn</button>
</div>;

ক্লিক হ্যান্ডলারে আমরা setName ফাংশনটি ব্যবহার করব, পণ্যের একটি নতুন নাম সেট করতে:

jsxfunction clickHandler() {
  setName('xxxx');
}

আসুন আমাদের সমস্ত কোড একত্রিত করি। এর ফলে বাটনে ক্লিক করার পর পাঠটি তাৎক্ষণিকভাবে নতুন মানতে পরিবর্তিত হবে:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  function clickHandler() {
    setName('xxxx');
  }
  
  return <div>
    <span>{name}</span>
    <button onClick={clickHandler}>btn</button>
  </div>;
}

আলাদা হ্যান্ডলার ফাংশন ব্যবহার করা বাধ্যতামূলক নয়। একটি বেনামী অ্যারো ফাংশন ব্যবহার করা যেতে পারে:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  return <div>
    <span>{name}</span>
    <button onClick={() => setName('xxxx')}>btn</button>
  </div>;
}