React میں useState کا استعمال: ایک گائیڈ
جیسے جیسے آپ ٹائپ کرتے ہیں، آپ کا پاس ورڈ بار کمزور سے مضبوط میں تبدیل ہو جاتا ہے۔ React 'state' کے ذریعے آپ کی ٹائپنگ کو یاد رکھتا ہے۔
State ڈیٹا کو محفوظ رکھتی ہے۔ یہ اس چیز پر نظر رکھتی ہے جو آپ ٹائپ کرتے ہیں یا کلک کرتے ہیں۔
تصور کریں کہ آپ اپنا نام ٹائپ کر رہے ہیں۔
- آپ کی ابتدائی state ایک خالی اسٹرنگ (empty string) ہے۔
- آپ J ٹائپ کرتے ہیں۔
- آپ state کو "" سے "J" میں اپ ڈیٹ کرنے کے لیے ایک فنکشن کال کرتے ہیں۔
- آپ o ٹائپ کرتے ہیں۔
- آپ state کو "Jo" میں تبدیل کرنے کے لیے فنکشن کال کرتے ہیں۔
ہر بار جب آپ state کو اپ ڈیٹ کرتے ہیں، React UI کو دوبارہ رینڈر (re-render) کرتا ہے۔ Re-rendering کا مطلب ہے کہ React پرانے ویو (view) کو صاف کرتا ہے اور آپ کے اپ ڈیٹ شدہ ڈیٹا کے ساتھ ایک نیا ویو بناتا ہے۔
عام ویری ایبلز (regular variables) کیوں استعمال نہیں کرنے چاہیے؟ ایک عام ویری ایبل آپ کے کوڈ میں تو تبدیل ہو جاتا ہے لیکن اسکرین پر اپ ڈیٹ نہیں ہوتا۔ آپ کے صارفین کو پرانا ڈیٹا نظر آئے گا۔ React state آپ کے ڈیٹا کو آپ کے UI سے جوڑ کر اس مسئلے کو حل کرتی ہے۔
useState کا استعمال کیسے کریں:
اسے React سے امپورٹ کریں۔
import { useState } from 'react';اسے ڈکلیئر کریں۔
const [age, setAge] = useState(20);
اس مثال میں:
- age آپ کی موجودہ ویلیو ہے۔
- setAge ویلیو کو تبدیل کرنے والا فنکشن ہے۔
- 20 آپ کی ابتدائی ویلیو ہے۔
اسے ابھی آزمائیں۔ ایک React پروجیکٹ کھولیں۔ ایک کاؤنٹر (counter) بنائیں۔ کاؤنٹ کو اپ ڈیٹ کرنے کے لیے ایک بٹن پر کلک کریں۔ اسکرین کو فوری طور پر تبدیل ہوتے ہوئے دیکھیں۔
ماخذ: https://dev.to/kaleablemmadev/usestate-in-react-a-beginners-guide-1j8i