Uddeshyo | Student Super App

10. React Hooks (useEffect)

📘 কনসেপ্ট (থিওরি)

useEffect হুক আপনাকে আপনার কম্পোনেন্টে সাইড ইফেক্ট (side effects) সম্পাদন করতে দেয়।
সাইড ইফেক্টের কিছু উদাহরণ হলো: ডেটা আনা (fetching data), সরাসরি ডম (DOM) আপডেট করা এবং টাইমার।

useEffect দুটি আর্গুমেন্ট গ্রহণ করে। দ্বিতীয় আর্গুমেন্টটি ঐচ্ছিক।
useEffect(, )

- কোনো ডিপেন্ডেন্সি পাঠানো হয়নি: প্রতিটি রেন্ডারে চলে।
- একটি ফাঁকা অ্যারে []: শুধুমাত্র প্রথম রেন্ডারে চলে।
- প্রপস বা স্টেট মান [prop, state]: প্রথম রেন্ডারে চলে এবং যেকোনো ডিপেন্ডেন্সির মান পরিবর্তন হলে চলে।

💡 উদাহরণ

টাইমারের জন্য useEffect এর ব্যবহার:

import { useState, useEffect } from "react";

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

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  }, []); // <- এখানে ফাঁকা ব্র্যাকেট যোগ করুন যাতে এটি শুধুমাত্র একবার চলে

  return I've rendered {count} times!;
}

🎯 আপনার কাজ (প্র্যাকটিস)

এমন একটি কম্পোনেন্ট লিখুন যা প্রথমবার রেন্ডার হওয়ার সময় (ফাঁকা ডিপেন্ডেন্সি অ্যারে) "Component Mounted" অ্যালার্ট দিতে useEffect ব্যবহার করে।

main.react

OUTPUT

Run your code to see the output here...