useState vs useEffect

সহজ বাংলায় useState vs useEffect 

🔹 useState

👉 কাজ কী?
কম্পোনেন্টের ভিতরে ডাটা সংরক্ষণ (state রাখা) ও পরিবর্তন করার জন্য।

👉 কখন ব্যবহার করবেন?

• সংখ্যা, লেখা, অবজেক্ট, অ্যারে রাখা

• বাটনে ক্লিক করলে মান পরিবর্তন

• ফর্ম ইনপুট

• show / hide, toggle

• login, cart count ইত্যাদি

👉 উদাহরণ:

import { useState } from "react";

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

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

📌 মনে রাখবেন:

• count → বর্তমান মান

• setCount() → মান পরিবর্তন করে

• State পরিবর্তন হলে কম্পোনেন্ট আবার render হয়

---

🔹 useEffect

👉 কাজ কী?
কম্পোনেন্ট render হওয়ার পর কোনো কাজ (side effect) চালানোর জন্য।

👉 কখন ব্যবহার করবেন?

• API call (Axios / Fetch)

• Database থেকে ডাটা আনা

• Timer (setInterval, setTimeout)

• Event listener

• DOM update

👉 উদাহরণ (API call):

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 <p>Total Users: {users.length}</p>;
}

📌 মনে রাখবেন:

• useEffect render হওয়ার পরে চলে

• [] দিলে → শুধু একবার (page load এ)

• dependency দিলে → সেই মান বদলালে চলবে

---

🔁 Dependency Array সহজভাবে

useEffect(() => {
  console.log("Effect চলছে");
}, [count]);

Dependency	কী হয়
না দিলে	প্রতিবার render এ চলবে
[]	শুধু একবার চলবে
[count]	count বদলালে চলবে

---

⚡ useState vs useEffect পার্থক্য

বিষয়	useState	useEffect
কাজ	ডাটা রাখা	কাজ চালানো
Render	পরিবর্তনে render হয়	render এর পরে চলে
API call	❌ না	✅ হ্যাঁ
UI নিয়ন্ত্রণ	✅ হ্যাঁ	❌ না

---

🧠 সহজ মনে রাখার নিয়ম

• ডাটা রাখতে হলে → useState

• কোনো কাজ করতে হলে (API, timer) → useEffect

---

চাও তো আমি দেখাতে পারি:

• useEffect cleanup

• Infinite loop সমস্যা

• তোমার Dashboard API example

• useState vs useRef

বললেই হবে 😊