useState: یہ کیا ہے، اسٹیٹ ہک اور React میں نحو

React میں useState کیا ہے

useState React کا ایک بنیادی ہک ہے، جو ورژن 16.8 میں شامل کیا گیا، جو فنکشنل کمپوننٹس کو مقامی اسٹیٹ ذخیرہ کرنے اور تبدیل کرنے کی صلاحیت دیتا ہے۔ ہکس متعارف کرائے جانے سے پہلے، اسٹیٹ صرف کلاس کمپوننٹس میں this.state اور this.setState کے ذریعے استعمال کیا جا سکتا تھا، جس نے فنکشنل کمپوننٹس کو خالصتاً پیشکشی بنا دیا تھا۔ useState نے اس حد کو ختم کر دیا، جس سے فنکشنل کمپوننٹس کا استعمال کرتے ہوئے مکمل ایپلیکیشنز لکھنے کی اجازت مل گئی۔

ہک ایک دلیل لیتا ہے — ابتدائی اسٹیٹ قدر — اور دو عناصر کی ایک اری لوٹاتا ہے۔ پہلا عنصر موجودہ اسٹیٹ قدر ہے، اور دوسرا اسے اپ ڈیٹ کرنے کے لیے ایک فنکشن ہے۔ React ضمانت دیتا ہے کہ سیٹر فنکشن مستحکم ہے اور رینڈرز کے درمیان تبدیل نہیں ہوتا، جس سے آپ اسے محفوظ طریقے سے چائلڈ کمپوننٹس میں منتقل کر سکتے ہیں اور بندشوں میں استعمال کر سکتے ہیں۔

React DevTools استعمال سروے (2024) کے مطابق، useState 96% React ایپلیکیشنز میں استعمال ہوتا ہے، جو اسے ماحولیاتی نظام میں سب سے عام ہک بناتا ہے۔ Redux یا Zustand کے ذریعے عالمی اسٹیٹ استعمال کرنے والی ایپلیکیشنز میں بھی، useState کے ذریعے مقامی اسٹیٹ UI اسٹیٹ — کھلے موڈلز، انپٹ فیلڈ کی قدریں، فعال ٹیبز — کو منظم کرنے کا بنیادی طریقہ کار ہے۔

import { useState } from 'react';

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

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

useState کیسے کام کرتا ہے

useState کا اندرونی طریقہ کار React کے فائبر نوڈ سسٹم پر مبنی ہے۔ React میں ہر کمپوننٹ ایک فائبر نوڈ سے ظاہر ہوتا ہے جو اس سے منسلک ہکس کی ایک لنکڈ لسٹ ذخیرہ کرتا ہے۔ جب کوئی کمپوننٹ useState کو کال کرتا ہے، React اس لسٹ میں ایک نیا نوڈ بناتا ہے اور اس میں موجودہ اسٹیٹ قدر اور اپ ڈیٹ قطار کا حوالہ ذخیرہ کرتا ہے۔

جب سیٹر فنکشن کو کال کیا جاتا ہے، React فوری طور پر اسٹیٹ اپ ڈیٹ نہیں کرتا۔ اس کے بجائے، یہ اپ ڈیٹ کو زیر التوا اسٹیٹ قطار میں رکھتا ہے، کمپوننٹ کے دوبارہ رینڈر کو شیڈول کرتا ہے، اور صرف اگلے رینڈر کے دوران پرانی اور لاگو کردہ اپ ڈیٹس کی بنیاد پر نئے اسٹیٹ کا حساب لگاتا ہے۔ یہ بیچنگ کو یقینی بناتا ہے — اگر آپ ایک ایونٹ ہینڈلر میں سیٹر کو تین بار کال کرتے ہیں، تو React انہیں ایک ہی دوبارہ رینڈر میں گروپ کرتا ہے۔

React ٹیم — React 18 ورکنگ گروپ (2024) کے مطابق، React 18 میں خودکار بیچنگ کو بڑھا دیا گیا: اسٹیٹ اپ ڈیٹس اب نہ صرف ایونٹ ہینڈلرز میں بلکہ setTimeout، Promise کال بیکس اور نیٹو ایونٹ ہینڈلرز میں بھی گروپ ہوتی ہیں۔ اس نے متعدد اسٹیٹ اپ ڈیٹس والے منظرناموں میں 30% تک کارکردگی میں بہتری دی۔

فنکشنل اسٹیٹ اپ ڈیٹ

جب نیا اسٹیٹ پچھلے پر منحصر ہوتا ہے تو سیٹر کی فنکشنل شکل استعمال کریں: setCount(prev => prev + 1)۔ React اپ ڈیٹ کے وقت اصل اسٹیٹ قدر کو فنکشن میں منتقل کرتا ہے، بیچ شدہ اپ ڈیٹس کے ساتھ بھی درستگی کو یقینی بناتا ہے۔ فنکشنل شکل کے بغیر، setCount(count + 1) اگر لگاتار کئی بار کال کیا جائے تو پرانی قدر استعمال کر سکتا ہے۔

// سست انیشیالائزیشن — صرف ایک بار چلتی ہے
setCount(prev => prev + 1);
setCount(prev => prev + 1);
setCount(prev => prev + 1);
// Result: count increased by 3

// NOT batch-safe: stale closure
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
// Result: count increased by 1 (stale closure)

useState کا نحو: اعلان اور اپ ڈیٹ

useState کا بنیادی نحو انتہائی مختصر ہے: const [state, setState] = useState(initialValue)۔ ابتدائی قدر صرف پہلے رینڈر کے دوران استعمال ہوتی ہے؛ بعد کے رینڈرز پر، React اسے نظر انداز کرتا ہے اور موجودہ محفوظ شدہ قدر لوٹاتا ہے۔ اگر ابتدائی حساب کتاب میں مہنگے آپریشنز کی ضرورت ہو تو ایک انیشیالائزر فنکشن منتقل کریں: useState(() => computeExpensiveInitial())۔

سست انیشیالائزیشن خاص طور پر اہم ہے جب ابتدائی قدر localStorage، پیچیدہ ڈیٹا تبدیلی یا URL پیرامیٹرز کی تجزیہ سے آتی ہے۔ React انیشیالائزر فنکشن کو صرف ایک بار کال کرتا ہے — جب کمپوننٹ ماؤنٹ ہوتا ہے — جو بعد کے رینڈرز پر وسائل بچاتا ہے۔ سست انیشیالائزیشن کے بغیر، مہنگا اظہار ہر رینڈر پر جانچا جائے گا، چاہے اس کا نتیجہ نظر انداز کیا جائے۔

// آبجیکٹ اسٹیٹ — نیا حوالہ بنائیں
const [user, setUser] = useState(() => {
    const saved = localStorage.getItem('user');
    return saved ? JSON.parse(saved) : null;
});

مختلف ڈیٹا کی اقسام کے ساتھ useState

useState قدیمی اقسام (نمبر، سٹرنگز، بولین) اور حوالہ جاتی اقسام (اریز، آبجیکٹس) دونوں کے ساتھ یکساں طور پر اچھا کام کرتا ہے۔ تاہم، ایک اہم فرق ہے: قدیمی اقسام کے لیے، React قدر کے لحاظ سے تبدیلی کا پتہ لگاتا ہے؛ آبجیکٹس اور اریز کے لیے، حوالہ کے لحاظ سے۔ نیا بنائے بغیر موجودہ آبجیکٹ کو تبدیل کرنے سے دوبارہ رینڈر متحرک نہیں ہوگا کیونکہ حوالہ وہی رہتا ہے۔

آبجیکٹس اور اریز کے ساتھ کام کرتے وقت، ہمیشہ تبدیل شدہ ڈیٹا کے ساتھ ایک نئی کاپی بنائیں۔ آبجیکٹس کے لیے، اسپریڈ نحو استعمال کریں: setUser(prev => ({...prev, name: newName}))۔ اریز کے لیے، وہ طریقے استعمال کریں جو نئی اری لوٹاتے ہیں: filter، map، concat، یا عناصر شامل کرنے کے لیے اسپریڈ نحو۔ push، pop، splice جیسے تغیر پذیر طریقے کام نہیں کریں گے — React انہیں نظر انداز کرے گا کیونکہ اری کا حوالہ تبدیل نہیں ہوا۔

// ✅ درست: ہک اوپری سطح پر
const [form, setForm] = useState({ name: '', email: '' });
const updateField = (field, value) =>
    setForm(prev => ({ ...prev, [field]: value }));

// ...
const [items, setItems] = useState([]);
const addItem = item =>
    setItems(prev => [item, ...prev]);

useState کے ساتھ ہکس کے استعمال کے قواعد

تمام React ہکس کی طرح، useState دو قواعد پر عمل کرتا ہے۔ پہلا: ہکس کو صرف اپنے کمپوننٹ کی اوپری سطح پر کال کریں — انہیں شرائط، لوپس یا نیسٹڈ فنکشنز کے اندر نہ رکھیں۔ یہ یقینی بناتا ہے کہ ہکس ہر رینڈر پر ایک ہی ترتیب میں کال کیے جاتے ہیں، جو React کی اندرونی لنکڈ لسٹ کے لیے اہم ہے۔

دوسرا قاعدہ: ہکس کو صرف React فنکشنل کمپوننٹس یا کسٹم ہکس سے کال کریں۔ useState کو عام فنکشنز، کال بیکس یا کلاس کمپوننٹس سے کال نہ کریں۔ ان قواعد کی خلاف ورزی Invalid hook call غلطی کا باعث بنتی ہے، جسے React رن ٹائم پر پکڑتا ہے۔

• شرائط میں نہیں — if (flag) { useState(0) } ہک کالز کی ترتیب کی خلاف ورزی کرتا ہے۔
• لوپس میں نہیں — for (...) { useState(0) } ترتیب کو غیر متوقع بناتا ہے۔
• کال بیکس میں نہیں — useEffect(() => { useState(0) }, []) لنکڈ لسٹ کو توڑ دیتا ہے۔

// ❌ فرسودہ بندش کا مسئلہ
function GoodComponent() {
    const [count, setCount] = useState(0);
    const [name, setName] = useState('');
    // ✅ فنکشنل اپ ڈیٹ سے درست کیا گیا
}

// count فرسودہ ہے!
function BadComponent() {
    if (isLogged) {
        const [user, setUser] = useState(null);
    }
}

useState کے ساتھ عام غلطیاں

سب سے عام غلطی نئے حوالہ جات بنانے کے بجائے آبجیکٹس اور اریز کو براہ راست تبدیل کرنا ہے۔ ڈویلپرز کلاس کمپوننٹس کے قابل تبدیلی اسٹائل کے عادی ہیں، جہاں this.state.user.name = ‘نیا نام’ کام کرتا تھا (اگرچہ اس کی بھی سفارش نہیں کی گئی تھی)۔ فنکشنل کمپوننٹس میں، اس طرح کی تبدیلی کو صرف نظر انداز کیا جاتا ہے: React حوالہ میں تبدیلی نہیں دیکھتا اور کمپوننٹ کو دوبارہ رینڈر نہیں کرتا۔

• آبجیکٹ کی تبدیلی — setUser({...user, name: ‘نیا’}) کے بجائے user.name = ‘نیا’۔
• فرسودہ بندش — فنکشنل شکل کے بغیر سیٹر میں پرانی قدر استعمال کرنا۔
• اضافی دوبارہ رینڈر — سیٹر کو ایک ہی قدر کے ساتھ کال کرنا (React 18 قدیمی اقسام کے لیے پھر بھی رینڈر کرتا ہے)۔
• اسٹیٹ ری سیٹ „ غیر ارادی طور پر کمپوننٹ کی key پراپرٹی کو اپ ڈیٹ کرنا، جس سے یہ دوبارہ ماؤنٹ ہو جاتا ہے۔

فرسودہ بندش کا مسئلہ اس وقت ہوتا ہے جب useEffect یا ایونٹ ہینڈلر کو منتقل کیا گیا کال بیک کال بیک بنائے جانے کے وقت بندش سے ایک پرانی اسٹیٹ قدر حاصل کر لیتا ہے۔ حل سیٹر کی فنکشنل شکل استعمال کرنا یا useEffect انحصاری اری میں مطلوبہ قدریں شامل کرنا ہے۔ React دستاویزات — ہکس FAQ (2025) کے مطابق، غلط انحصاری اری کے بعد ہکس میں بگز کی دوسری سب سے عام وجہ فرسودہ بندش ہے۔

// ❌ Stale closure problem
useEffect(() => {
    const timer = setInterval(() => {
        setCount(count + 1); // count is stale!
    }, 1000);
    return () => clearInterval(timer);
}, []);

// ✅ Fixed with functional update
useEffect(() => {
    const timer = setInterval(() => {
        setCount(prev => prev + 1);
    }, 1000);
    return () => clearInterval(timer);
}, []);