প্রপস (আগের Props পাঠ থেকে) বাইরে থেকে একটি কম্পোনেন্টে ডেটা প্রবাহিত হতে দেয়, কিন্তু একটি কম্পোনেন্ট নিজের প্রপস বদলাতে পারে না। State হলো অন্য অর্ধেক: এমন ডেটা যা একটি কম্পোনেন্ট নিজে ধরে রাখে আর সময়ের সাথে নিজেই বদলাতে পারে — একটি কাউন্টার, একটি ফর্ম ফিল্ড, একটি মেনু খোলা আছে কিনা।
একটি কম্পোনেন্টের ভেতরের একটি সাধারণ JavaScript ভ্যারিয়েবল প্রতিবার কম্পোনেন্ট re-render হলে তার শুরুর মানে রিসেট হয়ে যায়, আর এটি বদলালে প্রথমেই একটি re-render ট্রিগারও হয় না — React জানার কোনো উপায় নেই যে মানটা বদলেছে:
function Counter() {
let count = 0; // resets to 0 on every render — this does not work
function increment() {
count = count + 1; // React never finds out this happened
}
return <button onClick={increment}>Clicked {count} times</button>;
}useState দুটো সমস্যাই সমাধান করে: এটি একটি কম্পোনেন্টকে render-এর মধ্যে টিকে থাকা একটি মান দেয়, আর সেটা আপডেট করার একটি উপায় দেয় যা React-কে re-render করতে বলে:
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
function increment() {
setCount(count + 1);
}
return <button onClick={increment}>Clicked {count} times</button>;
}useState(0) শুরুর মান নেয় আর একটি জোড়া রিটার্ন করে: বর্তমান মান (count) আর সেটা আপডেট করার একটি ফাংশন (setCount) — এখানে [a, b] অ্যারে ডিস্ট্রাকচারিং JavaScript ES6 পাঠ-এর একই সিনট্যাক্স।
setCount(...) কল করলে দুটো জিনিস ঘটে: এটি সংরক্ষিত মান আপডেট করে, আর React-কে বলে কম্পোনেন্ট ফাংশন আবার চালাতে যাতে UI নতুন মান প্রতিফলিত করে। Introduction পাঠের "declarative" ধারণার আসল প্রক্রিয়া এটাই — আপনি কখনো ম্যানুয়ালি DOM স্পর্শ করেন না; আপনি state আপডেট করেন, আর React মিলিয়ে re-render করে।
function App() {
return (
<div>
<Counter />
<Counter />
</div>
);
}
// Clicking one Counter never affects the other — each has its own independent state.একাধিক useState কল ঠিক আছে
একটি কম্পোনেন্টে প্রয়োজন অনুযায়ী যত ইচ্ছা useState কল থাকতে পারে — সবকিছু একটি বড় অবজেক্টে বান্ডেল করার বদলে প্রতিটি স্বাধীন state-এর জন্য একটি করে সাধারণ প্যাটার্ন। const [name, setName] = useState(''); const [age, setAge] = useState(0); সম্পূর্ণ স্বাভাবিক।