React State Explained (useState Basics) – বিস্তারিত বাংলায়

React-এ State হচ্ছে একটি ডেটা স্টোরেজ সিস্টেম যা কম্পোনেন্টের ভিতরে ডেটা ধরে রাখে এবং সেই ডেটা পরিবর্তিত হলে UI নিজে থেকেই আপডেট হয়ে যায়। State মূলত সেই সব ডেটা ধরে রাখে যেগুলো সময়ের সাথে সাথে পরিবর্তিত হয়।

🔹 State কী?

State হলো React কম্পোনেন্টের ভিতরের Dynamic Data। অর্থাৎ এমন একটি ডেটা যা আপনার অ্যাপ চলার সময় পরিবর্তিত হয়, এবং সেই পরিবর্তনের সাথে UI আবার রেন্ডার হয়।

উদাহরণ:

• Counter এর সংখ্যা
• Form Input এর মান
• Button Click করলে UI পরিবর্তন
• Theme Mode (Light/Dark)

🔹 useState কী?

useState হলো একটি React Hook যা ফাংশনাল কম্পোনেন্টে State তৈরি করতে দেয়। এটি দুইটি জিনিস দেয়:

1. state value – যার মধ্যে ডেটা থাকে
2. setState function – state আপডেট করার জন্য ব্যবহার হয়

Syntax:

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

initialValue: state-এর শুরুর মান (number/string/array/object যেকোনো কিছু হতে পারে)

🔹 useState কেন গুরুত্বপূর্ণ?

React-এ UI পরিবর্তনের মূল শক্তি হলো State. যখনই state আপডেট হয়, React পুরো UI নতুন করে রেন্ডার করে এবং পরিবর্তন দেখায়, যা আপনার অ্যাপকে dynamic করে তোলে।

🔹 Counter App Example (সাধারণ Example)

import { useState } from "react";

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

  return (
    <div>
      <h2>Count: {count}</h2>

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

export default Counter;

✔️ Output ব্যাখ্যা

• count = state value
• setCount = state পরিবর্তনের ফাংশন
• Button চাপলে state আপডেট হয়
• state পরিবর্তনের কারণে UI নিজেই রিফ্রেশ হয়

🔹 Multiple State ব্যবহার

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

React-এ আপনি চাইলে একটি কম্পোনেন্টে অনেকগুলো state রাখতে পারেন। প্রতিটি state আলাদাভাবে কাজ করবে।

🔹 State Update Rules (গুরুত্বপূর্ণ)

✔️ 1. State Directly Change করা যাবে না

❌ ভুল:

count = count + 1;  // এটি কখনোই করবেন না

✔️ সঠিক:

setCount(count + 1);

✔️ 2. State change asynchronous

State তৎক্ষণাৎ পরিবর্তিত দেখাবে না—React পরে UI আপডেট করে।

✔️ 3. Previous value ব্যবহার করতে চাইলে callback ব্যবহার করুন

setCount(prev => prev + 1);

🔹 Object State Example

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

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

Spread Operator ব্যবহার করা জরুরি কারণ state immutable (সরাসরি পরিবর্তন করা যায় না)।

🔹 Summary

• State হলো dynamic data
• useState দিয়ে state তৈরি করা হয়
• State update হলে UI auto rerender হয়
• setState ছাড়া state পরিবর্তন করা যায় না
• React-এর পুরো dynamic behavior state-এর মাধ্যমেই কাজ করে

🎉 শেষ কথা

React শেখার মূল ভিত্তি হলো State। State না বুঝলে React-এর ৫০% অংশই বুঝা অসম্ভব। তাই useState ভালোভাবে প্র্যাকটিস করুন এবং ছোট ছোট প্রজেক্টে ব্যবহার করুন।