ReactIntermediate

State ও useState

useState, state update নিয়ম, immutability ও re-render ধারণা — বাংলায়।

11টি অংশবাংলা ভাষায়

State কী?

State হলো component-এর নিজস্ব ডেটা যা বদলালে UI automatically re-render হয়। useState সেই state-এর জন্য hook।

useState basicsjsx

jsx

import { useState } from "react";

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

  const increment = () => setCount(count + 1);

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

Update নিয়ম

সরাসরি count = 5 লিখা হয় না — সবসময় setter ব্যবহার করুন
Setter-এর নতুন value পুরনো value replace করে, merge হয় না
এক event-এ একাধিক update হলে setCount((prev) => prev + 1) functional update দরকার
State change ⇒ re-render ⇒ UI আপডেট

Functional updatejsx

jsx

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

  // এক event-এ ৩ বার +১
  const addThree = () => {
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
  };

  return (
    <button onClick={addThree}>+3 (count: {count})</button>
  );
}

Object/Array state

Immutabilityjsx

jsx

const [user, setUser] = useState({ name: "রহিম", age: 24 });

// পুরনো object-টি বদলাবেন না — নতুন বানান
const changeName = () => {
  setUser({ ...user, name: "রহিম আহমেদ" });
};

const [todos, setTodos] = useState([]);

const add = (todo) => setTodos([...todos, todo]);
const remove = (id) => setTodos(todos.filter((t) => t.id !== id));

Lazy initial state

প্রাথমিক value computation ব্যয়বহুল হলে function দিন — শুধু প্রথমবার কল হবে:

Lazy initial statejsx

jsx

const [students, setStudents] = useState(() => {
  return studentsFromDB(); // শুধু mount-এর সময় চলে
});

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।