useState হুক কীভাবে কাজ করে?

Question

Accepted Answer

`useState` একটি ফাংশন কম্পোনেন্টকে **স্থানীয়, প্রতিক্রিয়াশীল অবস্থার** একটি অংশ দেয়। এটি একটি জোড় প্রদান করে: **বর্তমান মূল্য** এবং একটি **setter** ফাংশন। setter কল করা নতুন মূল্যের সাথে পুনরায় রেন্ডার করার সময় নির্ধারণ করে।

```jsx
const [count, setCount] = useState(0); // 0 is the initial value
setCount(count + 1);   // value form
setCount(c => c + 1);  // functional form (preferred when based on previous)
```

## দুটি জিনিস যা শিক্ষানবিসদের অবাক করে

**1. আপডেটগুলি অ্যাসিঙ্ক্রোনাস / ব্যাচযুক্ত।** `count` `setCount` এর পরের লাইনে পরিবর্তন হয় না; এটি *পরবর্তী* রেন্ডারে নতুন মূল্য রয়েছে। তাই এটি শুধুমাত্র একবার বৃদ্ধি পায়:

```jsx
setCount(count + 1);
setCount(count + 1); // both read the SAME stale `count` → +1 total
```

যখন পরবর্তী মূল্য পূর্ববর্তী মূল্যের উপর নির্ভর করে তখন **ফাংশনাল আপডেটার** ব্যবহার করুন, কারণ React সর্বশেষ মূল্য পাস করে:

```jsx
setCount(c => c + 1);
setCount(c => c + 1); // +2 total — each gets the up-to-date value
```

**2. প্রাথমিক মূল্য শুধুমাত্র প্রথম রেন্ডারে ব্যবহৃত হয়।** একটি ব্যয়বহুল ডিফল্টের জন্য, একটি ফাংশন পাস করুন যাতে এটি একবার চলে (lazy init):

```jsx
const [data] = useState(() => expensiveInit()); // runs once, not every render
```

## এটি কেন গুরুত্বপূর্ণ

অবস্থা হল যা একটি কম্পোনেন্টকে ইন্টারঅ্যাক্টিভ করে তোলে — React ফাংশনটি পুনরায় চালায় এবং অবস্থা পরিবর্তন হলে UI পুনরায় রেন্ডার করে।

অবস্থাকে **অপরিবর্তনীয়** হিসাবে বিবেচনা করুন: পরিবর্তন করার পরিবর্তে একটি নতুন অ্যারে/অবজেক্ট তৈরি করুন, উদাহরণস্বরূপ `setItems([...items, x])`، অন্যথায় React পরিবর্তন সনাক্ত করতে পারে না।