useState Full Guide (বাংলা)

useState হলো React-এর সবচেয়ে বেশি ব্যবহৃত Hook, যা Functional Component-এর ভিতরে state তৈরি এবং নিয়ন্ত্রণ করতে সাহায্য করে। React-এ state মানে হলো এমন ডাটা যেটি পরিবর্তন হলে UI (User Interface) আবার রেন্ডার হয়।

📌 useState কী?

useState হলো একটি React Hook যা component-এর ভিতরে পরিবর্তনশীল ডাটা (state) সংরক্ষণ করতে ব্যবহৃত হয়। State পরিবর্তন হলে React স্বয়ংক্রিয়ভাবে UI রিফ্রেশ করে দেয়।

📌 useState কোথায় ব্যবহার করবেন?

• Counter App
• Form input value নিয়ন্ত্রণ
• Toggle বা Show/Hide data
• Button click এ UI update করা
• API data store করা

📌 useState Hook এর Syntax

const [state, setState] = useState(initialValue);

state: বর্তমান মান (variable)
setState: state আপডেট করার function
initialValue: state-এর শুরুর মান

⭐ Example 1 — Basic Counter

import { useState } from "react";

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

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

export default Counter;

এখানে count হলো state এবং setCount state change করার function। প্রতি বার button চাপলে UI আবার রেন্ডার হয়।

⭐ Example 2 — State with String

const [name, setName] = useState("Rahim");

return (
  <div>
    <h2>Name: {name}</h2>
    <button onClick={() => setName("Karim")}>Change Name</button>
  </div>
);

⭐ Example 3 — State with Objects

Object update করতে spread operator ব্যবহার করতে হয়।

const [user, setUser] = useState({
  name: "Rahim",
  age: 22
});

const updateAge = () => {
  setUser({ ...user, age: user.age + 1 });
};

return (
  <div>
    <h2>Name: {user.name}</h2>
    <h2>Age: {user.age}</h2>
    <button onClick={updateAge}>Increase Age</button>
  </div>
);

⭐ Example 4 — State with Array

const [items, setItems] = useState([]);

const addItem = () => {
  setItems([...items, `Item ${items.length + 1}`]);
};

return (
  <div>
    <button onClick={addItem}>Add Item</button>
    {items.map((item, index) => (
      <p key={index}>{item}</p>
    ))}
  </div>
);

📌 Important Concept: Re-render

State পরিবর্তন হলে React UI রি-রেন্ডার করে। কিন্তু state একই value দিলে রি-রেন্ডার হয় না।

📌 State Update Asynchronously হয়

setState() করার পরপরই state পরিবর্তন হয় না। React state batching করে।

❌ Wrong (immediate console):

setCount(count + 1);
console.log(count); // এখনো পুরানো value দেখাবে

✔ Correct (useEffect or callback):

setCount(prev => prev + 1);

📌 Functional Update (Best Practice)

যদি নতুন state আগের state-এর উপর নির্ভর করে, তাহলে functional update ব্যবহার করুন।

setCount(prevCount => prevCount + 1);

📌 Multiple State Example

const [name, setName] = useState("");
const [age, setAge] = useState(0);

একটি component-এ একাধিক state থাকতে পারে।

📌 Clearing or Resetting State

setCount(0);
setName("");
setUser({});
setItems([]);

📌 Best Practices for useState

• State যত কম রাখবেন, performance তত ভালো হবে।
• Object বা Array update করতে spread ব্যবহার করুন।
• setState কে loop-এর ভিতরে কখনো ব্যবহার করবেন না।
• নতুন value আগের value-এর উপর নির্ভর করলে functional update করুন।

📌 Small Project — Counter with Increase/Decrease/Reset

import { useState } from "react";

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

  return (
    <div style={{ textAlign: "center" }}>
      <h1>Counter: {count}</h1>

      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

export default CounterProject;

🎉 Final Summary

• useState React-এর সবচেয়ে গুরুত্বপূর্ণ Hook
• এটি component-এর data পরিবর্তন করতে দেয়
• State change হলে UI rerender হয়
• Array/object update করতে spread operator গুরুত্বপূর্ণ

React শেখার প্রথম ধাপ হলো useState ভালোভাবে বোঝা।