State کوئی بھی ڈیٹا ہے جو وقت کے ساتھ تبدیل ہو سکتا ہے اور جس پر UI اس کو render کرنے کے لیے منحصر ہے۔ جب state تبدیل ہوتی ہے، تو UI اس کو ظاہر کرنے کے لیے اپڈیٹ ہوتا ہے۔ یہ آپ کی ایپلیکیشن کی کسی بھی لمحے میں "میموری" ہے۔
✓ A counter value, a form's input text, a toggle (on/off)
✓ Whether a modal is open, the active tab, loading/error flags
✓ The logged-in user, items in a cart, fetched API data
✓ The current theme (dark/light), selected filters
function Counter() {
const [count, setCount] = useState(0); // `count` is state
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times {/* the UI is a function of state */}
</button>
);
}
جدید frameworks کا بنیادی خیال: UI = f(state)۔ آپ DOM کو دستی طور پر اپڈیٹ نہیں کرتے؛ آپ state کو تبدیل کرتے ہیں، اور framework UI کو دوبارہ render کرتا ہے تاکہ وہ match کرے۔ بٹن پر کلک کریں → count تبدیل ہو → دکھایا گیا نمبر خودکار طور پر اپڈیٹ ہو۔
State: changes over time, drives re-renders (count, user, isOpen)
Constants: never change (PI, config URLs) — not state
Derived: computed FROM state (fullName from firstName + lastName) — don't store separately
ہر متغیر state نہیں ہے — صرف ڈیٹا جو تبدیل ہوتا ہے اور اثر ڈالتا ہے جو render ہوتا ہے۔ وہ قیمتیں جو آپ موجودہ state سے کمپیوٹ کر سکتے ہیں انہیں الگ state کے طور پر محفوظ نہیں کیا جانا چاہیے (یہ خطرہ ہے کہ وہ غیر مطابقت میں آ جائیں)۔
Local/UI state → belongs to one component (input text, isOpen)
Global state → shared app-wide (user, theme, cart)
Server state → data fetched from an API (cached remote data)
URL state → in the address bar (filters, page number)
State کو "ڈیٹا جو تبدیل ہوتا ہے اور UI کو چلاتا ہے" کے طور پر سمجھنا تمام فرنٹ اینڈ ڈیولپمنٹ کی بنیاد ہے۔
ذہنی نمونہ UI = f(state) یہ وضاحت کرتا ہے کہ React/Vue/Angular کیسے کام کرتے ہیں — آپ state کو منظم کرتے ہیں، اور view اس کے بعد آتا ہے۔
یہ پہچاننا کہ کیا ہے اور کیا state نہیں ہے (اور ماخوذ قیمتوں کو ڈپلیکیٹ نہ کرنا) اسے اچھی طرح سے منظم کرنے کی طرف پہلا قدم ہے؛ state management میں سب کچھ اس تصور پر بنایا جاتا ہے۔