React-এ useEffect-এ নির্ভরতা

এখন চলুন বোতাম টিপে রং পরিবর্তন করি। রঙের জন্য color নামক একটি স্টেট তৈরি করি, এটিকে একটি প্রারম্ভিক মান দিয়ে:

App.jsxconst [color, setColor] = useState('green');

আমাদের স্টেট দিয়ে স্ট্রিং মানটি প্রতিস্থাপন করি useEffect-এ এবং বর্গাকার বন্ধনীতে এর নির্ভরতার তালিকায় এটি যোগ করতে ভুলবেন না। এখন স্টেট color পরিবর্তন হলে প্রতিবার ইফেক্টটি কার্যকর হবে:

App.jsxfunction App() {
  useEffect(() => {
    document.body.style.backgroundColor = color;
  }, [color]);
  
  ...
}

এখন আমাদের কম্পোনেন্টে রং পরিবর্তনের জন্য একটি বোতাম যোগ করি:

App.jsxreturn (
  <div>
    <h1>React App</h1>
    <button onClick={changeColor}>change</button>
  </div>
);

ক্লিক হ্যান্ডলার ফাংশনটিও যোগ করি, যা আমাদের রং কমলা করতে পরিবর্তন করবে:

App.jsxfunction changeColor() {
  setColor('orange');
}