useEffect Full Guide (বাংলা)

useEffect হলো React-এর একটি অত্যন্ত গুরুত্বপূর্ণ Hook, যা Functional Component-এর ভিতরে side effects বা UI-এর বাইরে ঘটে এমন কাজগুলো পরিচালনা করতে ব্যবহৃত হয়। React Components সাধারণত UI রেন্ডার করে, কিন্তু side-effect মানে হলো UI-এর বাইরে অতিরিক্ত কোনো কাজ—যেমন API call, DOM update, timer শুরু করা ইত্যাদি।

📌 useEffect কী?

useEffect() হলো একটি React Hook যা component রেন্ডার হওয়ার পরে নির্দিষ্ট কোড চালায়। এটি Class Component-এর componentDidMount, componentDidUpdate, এবং componentWillUnmount কে একত্রে ব্যবহার করার সুযোগ দেয়।

📌 useEffect কেন দরকার?

• API থেকে data fetch করতে
• Event listener add/remove করতে
• Timer বা interval ব্যবহার করতে
• External library ইন্টিগ্রেশন করতে
• DOM element update করতে

📌 useEffect এর Syntax

useEffect(() => {
   // code to run
}, [dependencies]);

👉 1st argument: callback function (side-effect)
👉 2nd argument: dependency array (কোন state/prop change হলে effect আবার চলবে)

------------------------------

⭐ useEffect 3 Types (Most Important) ⭐

------------------------------

1️⃣ useEffect without dependency — Runs on every render

useEffect(() => {
  console.log("Every render এ চলবে");
});

ব্যবহার: খুব কম ক্ষেত্রে প্রয়োজন হয়, কারণ এটি performance heavy।

2️⃣ useEffect with empty dependency — Runs only once (componentDidMount)

useEffect(() => {
  console.log("Only first render এ চলবে");
}, []);

ব্যবহার:

• API call
• Event listener add
• Initialize data

3️⃣ useEffect with dependencies — Runs when dependency changes

useEffect(() => {
  console.log("count পরিবর্তন হলেই effect চলবে");
}, [count]);

ব্যবহার:

• Form values অনুযায়ী validation করা
• Specific state পরিবর্তন হলে API call করা

📌 Example 1: Simple useEffect

import { useEffect, useState } from "react";

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

  useEffect(() => {
    console.log("Effect called");
  });

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

📌 Example 2: API Fetching with useEffect

import { useEffect, useState } from "react";

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <div>
      <h2>Users Loaded: {users.length}</h2>
    </div>
  );
}

📌 Example 3: Dependency-based useEffect

const [query, setQuery] = useState("");

useEffect(() => {
  console.log("Search:", query);
}, [query]);

------------------------------

⭐ Cleanup Function Explained ⭐

------------------------------

যেসব effect component destroy হলে বন্ধ করতে হয়, যেমন:

• Timer clear করতে
• Event listener remove করতে
• Subscription বন্ধ করতে

সেক্ষেত্রে useEffect থেকে return করা function = cleanup function

👉 Syntax:

useEffect(() => {
   // effect code

   return () => {
     // cleanup code
   };
}, []);

📌 Example 4: Timer Cleanup

useEffect(() => {
  const timer = setInterval(() => {
    console.log("Running...");
  }, 1000);

  return () => {
    clearInterval(timer);
  };
}, []);

📌 Example 5: Event Listener Cleanup

useEffect(() => {
  const handleResize = () => console.log(window.innerWidth);
  window.addEventListener("resize", handleResize);

  return () => {
    window.removeEventListener("resize", handleResize);
  };
}, []);

------------------------------

⭐ useEffect Common Mistakes ⭐

------------------------------

• ❌ Dependency array ভুলে যাওয়া
• ❌ Object/Array dependency directly দেওয়া (কারণ reference change হয়)
• ❌ Infinite loop তৈরি করা
• ❌ setState কে dependency ছাড়া effect এর ভিতরে ব্যবহার করা

📌 Infinite Loop Example (Wrong)

useEffect(() => {
  setCount(count + 1);
});

Issue: প্রতিবার state change হচ্ছে → rerender → effect আবার চলছে → infinite loop

📌 Correct Way

useEffect(() => {
  setCount(prev => prev + 1);
}, []);

📌 Best Practices

• API call এর জন্য dependency array খালি রাখুন ([])
• Cleanup function ব্যবহার করতে ভুলবেন না
• Effect সবসময় UI আপডেট শেষ হওয়ার পরে রান করে
• Multiple useEffect ব্যবহার করতে ভয় পাবেন না

------------------------------

⭐ Small Project: Auto Counter With Start/Stop ⭐

------------------------------

import { useState, useEffect } from "react";

function AutoCounter() {
  const [count, setCount] = useState(0);
  const [start, setStart] = useState(false);

  useEffect(() => {
    if (!start) return;

    const timer = setInterval(() => {
      setCount(prev => prev + 1);
    }, 1000);

    return () => clearInterval(timer);

  }, [start]);

  return (
    <div style={{ textAlign: "center" }}>
      <h1>Count: {count}</h1>
      <button onClick={() => setStart(true)}>Start</button>
      <button onClick={() => setStart(false)}>Stop</button>
    </div>
  );
}

export default AutoCounter;

🎉 Final Summary

• useEffect side-effect handle করতে ব্যবহৃত হয়
• Three types: no dependency, empty dependency, with dependency
• API calling, event listener, timer—সব useEffect দিয়ে করা যায়
• Cleanup function খুব গুরুত্বপূর্ণ

React শেখার ক্ষেত্রে useEffect গভীরভাবে বোঝা অত্যন্ত প্রয়োজনীয়।