React-এ useEffect ইফেক্ট হুক

ইফেক্টগুলির সাথে কাজ করার জন্য useEffect হুক ব্যবহার করা হয়। আসুন এটির কাজ দেখি।

প্রথমে আমাদের হুকটি ইম্পোর্ট করি:

App.jsximport { useEffect } from 'react';

আসুন একটি App কম্পোনেন্ট তৈরি করি যাতে একটি শিরোনাম রয়েছে:

App.jsxfunction App() {
  return (
    <div>
      <h1>React App</h1>
    </div>
  );
}

export default App;

ধরুন যে আমাদের রেন্ডারিংয়ের পরে কিছু কাজ করতে হবে, উদাহরণস্বরূপ, সম্পূর্ণ পৃষ্ঠার ব্যাকগ্রাউন্ড রং সেট করা। এই ক্ষেত্রে, বাহ্যিক সিস্টেমটি হবে ব্রাউজারের DOM।

আসুন আমাদের হুকটি প্রয়োগ করি:

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

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