یوز اسٹیٹ ہک – ایک جامع گائیڈ

ریاست کیا ہے؟

اس سے پہلے کہ ہم UseState ہک میں گہرائی میں جائیں آئیے پہلے اس اصطلاح کو سمجھیں۔ ریاست.

ریاست وقت کے ایک مقررہ مقام پر کسی چیز کے بارے میں معلومات کی نمائندگی کرتی ہے۔

مثال کے طور پر، آئیے ٹیکسٹ باکس پر غور کریں۔

ابتدائی طور پر، اس ٹیکسٹ باکس کے اندر کچھ نہیں ہے، لہذا اس کی حالت ہے خالی. فرض کریں کہ آپ اس کے اندر ہیلو ٹائپ کرنا شروع کر دیں تو ہر کلیدی اسٹروک کے لیے ٹیکسٹ باکس کی حالت بدل جائے گی۔ سب سے پہلے یہ "H"، پھر "He"، پھر "Hel" اور اسی طرح "Hello" بن جائے گا۔

اس کے علاوہ، نوٹ کریں کہ جیسے آپ ٹائپ کر رہے ہیں، آپ پچھلی قدر کھو نہیں رہے ہیں۔ اگر آپ "ای" کے بعد "H" دباتے ہیں تو آپ کو صرف "e" نہیں بلکہ "He" مل رہا ہے۔ دوسرے لفظوں میں آپ ریاست کے بارے میں سوچ سکتے ہیں۔ میموری ٹیکسٹ باکس کے.

React جزو میں ریاست کی ضرورت۔

آئیے اس کو ایک مثال کی مدد سے سمجھتے ہیں۔

ریاست کے بغیر Codesanbox

یہاں ہمارے پاس ایک ہے۔ کلک کاؤنٹر وہ جزو جو انکریمنٹ بٹن پر کلک کرنے کی تعداد کو ظاہر کرتا ہے۔

ہم ایک استعمال کر رہے ہیں مقامی متغیر "کاؤنٹر" کلکس کی گنتی برقرار رکھنے کے لیے۔

ہر بار جب ہم انکریمنٹ بٹن پر کلک کرتے ہیں، handleClick فنکشن کا مطالبہ کیا جائے گا۔ یہ فنکشن کاؤنٹر ویلیو میں 1 کا اضافہ کرے گا اور کنسول میں ویلیو کو بھی لاگ ان کرے گا۔

آگے بڑھیں، کوڈ سینڈ باکس پیش نظارہ میں انکریمنٹ بٹن پر کلک کریں۔

کچھ بھی نہیں ہوا؟

ویسے ہماری منطق درست معلوم ہوتی ہے۔ کنسول (کوڈ سینڈ باکس) میں لاگ ان ویلیو ہر بار جب ہم کلک کرتے ہیں تو درست طریقے سے اپ ڈیٹ ہوتی ہے، لیکن یہ اپ ڈیٹ UI میں کیوں ظاہر نہیں ہوتا؟

یہ React کے کام کرنے کے طریقے کی وجہ سے ہے۔

• مقامی متغیرات میں تبدیلیاں دوبارہ رینڈر کو متحرک نہیں کرتی ہیں۔
• دوبارہ رینڈر کے دوران، ایک جزو شروع سے بنایا جاتا ہے یعنی ایک جزو کا فنکشن (اس مثال میں یہ ClickCounter فنکشن ہے) ایک بار پھر سے عمل میں لایا جاتا ہے۔ چونکہ متغیرات (مثال کے طور پر، کاؤنٹر) فنکشن کے لیے مقامی ہیں، اس لیے ان کی پچھلی قدریں ضائع ہو جاتی ہیں۔

تو ہم جز کو رینڈرز کے درمیان اقدار کو کیسے یاد رکھیں؟

جی ہاں، آپ نے صحیح سمجھا! ہم یہ کی مدد سے کرتے ہیں۔ ریاست کا استعمال کریں کانٹا.

یوز اسٹیٹ ہک

UseState ہک ریاست کو محفوظ رکھنے اور دوبارہ رینڈر کو متحرک کرنے کے لیے میکانزم فراہم کرتا ہے۔

آئیے اس کے استعمال کو دیکھتے ہیں۔

import React, { useState } from "react";
const state = useState(initialValue); // OR const state = React.useState(initialValue);

UseState ہک ایک صف واپس کرتا ہے جس میں دو آئٹمز ہوتے ہیں:

• A ریاست متغیر جو دوبارہ رینڈر کے دوران اپنی اقدار کو برقرار رکھتا ہے۔ UseState کو بھیجی گئی ابتدائی قدر پہلی رینڈر کے دوران اسٹیٹ متغیر کو تفویض کی جاتی ہے۔
• A سیٹر فنکشن جو ریاست کے متغیر کو اپ ڈیٹ کرتا ہے اور دوبارہ رینڈر کو بھی متحرک کرتا ہے۔

const state = useState(0);
const data = state[0];
const setData = state[1];

کا استعمال کرتے ہوئے صف کی ڈی-سٹرکچرنگ ، ہم مندرجہ بالا بیانات کو ایک ہی بیان میں ری ایکٹر کر سکتے ہیں، جیسا کہ ذیل میں دکھایا گیا ہے:

const [data, setData] = useState(0);

UseState کو بھیجی گئی ابتدائی قدر صرف پہلی رینڈر کے دوران استعمال ہوتی ہے۔ دوبارہ پیش کرنے کے لیے، اسے نظر انداز کر دیا جاتا ہے۔

useState کے ساتھ کاؤنٹر

اب، یوز اسٹیٹ ہک کو شامل کرنے کے لیے پہلے کاؤنٹر مثال کو اپ ڈیٹ کریں۔

• چونکہ ہمیں دوبارہ رینڈرز کے درمیان کاؤنٹر ویلیو کی ضرورت ہے، آئیے اسے ایک حالت میں تبدیل کریں۔

const [counter, setCounter] = useState(0);

• ہینڈل کلک فنکشن کے اندر سیٹ کاؤنٹر کو کال کرنا۔

const handleClick = () => { setCounter(counter + 1); console.log(`%c Counter:${counter}`, "color:green");
};

سیٹ کاؤنٹر فنکشن کاؤنٹر ویلیو کو 1 تک اپ ڈیٹ کرے گا اور دوبارہ رینڈر کو متحرک کرے گا۔ جب جزو کے فنکشن کو دوبارہ رینڈر کرنے پر کال کیا جاتا ہے تو useState کے ذریعہ واپس کردہ اسٹیٹ متغیر کی تازہ ترین قیمت ہوگی۔

اپ ڈیٹ شدہ کوڈ کے ساتھ CodeSandbox کو آزمائیں۔ انکریمنٹ بٹن پر کلک کریں اور یوز اسٹیٹ کا جادو دیکھیں۔

UseState کے ساتھ Codesanbox

آپ تصدیق کر سکتے ہیں کہ دوبارہ پیش کرنے پر، فعال جزو کلک کاؤنٹر کنسول لاگز دیکھ کر دوبارہ بلایا جاتا ہے۔ لاگ "ClickCounter start" جو جزو کے شروع میں شامل کیا گیا ہے ہر رینڈر پر لاگ ان کیا جائے گا۔

اپڈیٹر فنکشن

فرض کریں کہ ہم ہر کلک پر کاؤنٹر کی قدر میں 4 اضافہ کرنا چاہتے ہیں۔

const handleClick = () => { setCounter(counter + 1); setCounter(counter + 1); setCounter(counter + 1); setCounter(counter + 1); console.log(`%c Counter:${counter}`, "color:green"); };

فرض کریں کہ کاؤنٹر کی ابتدائی قیمت 0 ہے۔ بٹن پر کلک کرنے کے بعد آپ کو کیا دیکھنے کی امید ہے؟

اپڈیٹر فنکشن کے بغیر

آپ کو توقع تھی کہ گنتی 4 ہوگی؟ لیکن آپ اس کے بجائے 1 کیوں دیکھتے ہیں؟

a) ہر رینڈر ریاست سے وابستہ ہے۔ اس ریاست کی قیمت اس رینڈر کی زندگی بھر کے لیے مقفل رہتی ہے۔

نوٹ کریں کہ ہینڈل کلک فنکشن کے اندر لاگ ان کاؤنٹر ویلیو کو 0 کے طور پر پرنٹ کرتا ہے۔

اس سے کوئی فرق نہیں پڑتا ہے کہ آپ کتنی بار سیٹ کاؤنٹر طریقہ کو کال کریں، کاؤنٹر کی قدر ایک ہی رہتی ہے۔

const handleClick = () => { setCounter(counter + 1); setCounter(counter + 1); setCounter(counter + 1); setCounter(counter + 1); console.log(`%c Counter:${counter}`, "color:green"); };

ب) جب تک ایونٹ کے ہینڈلر کے اندر موجود تمام کوڈ پر عمل درآمد نہیں ہو جاتا، React دوبارہ رینڈر کو متحرک نہیں کرے گا۔

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

لہذا، یہاں ہمیں 4 مختلف رینڈرز کے بجائے ایک ہی رینڈر ملتا ہے۔

یہ مثال آسان ہے اور آپ نیچے دکھائے گئے کوڈ کو اپ ڈیٹ کر کے اس مسئلے کو حل کر سکتے ہیں۔

const handleClick = () => {
setCounter(counter + 4); console.log(`%c Counter:${counter}`, "color:green"); };

لیکن کیا ہوگا اگر آپ کے پاس استعمال کا معاملہ ہے جہاں آپ اگلے رینڈر سے پہلے ریاست کو متعدد بار اپ ڈیٹ کرنا چاہتے ہیں۔

یہ وہ جگہ ہے جہاں _ اپڈیٹر _ فنکشن کام آتا ہے۔

ہم پچھلی مثال کو اپڈیٹر فنکشن کے ساتھ حسب ذیل ری ایکٹر کر سکتے ہیں۔

const handleClick = () => { setCounter(prevCounter => prevCounter + 1); setCounter(prevCounter => prevCounter + 1); setCounter(prevCounter => prevCounter + 1); setCounter(prevCounter => prevCounter + 1); console.log(`%c Counter:${counter}`, "color:green"); };

یہاں prevCounter ⇒ prevCounter + 1 اپڈیٹر فنکشن کی نمائندگی کرتا ہے۔

جیسا کہ پہلے بیان کیا گیا ہے، یہ اپڈیٹر بیانات بھی قطار میں ہیں (بیچنگ)۔

اپڈیٹر فنکشن کو ایک زیر التواء/پچھلی حالت ملتی ہے جسے وہ اگلی حالت کا حساب لگانے کے لیے استعمال کرتا ہے۔

ذیل میں کوڈ سینڈ باکس ہے جس میں اپڈیٹر فنکشن شامل کیا گیا ہے۔ انکریمنٹ بٹن پر کلک کرنے کی کوشش کریں۔

اپڈیٹر فنکشن سینڈ باکس

شروع کرنے والا فنکشن

ذیل کی مثال پر ایک نظر ڈالیں۔ یہاں ہم ریاست کے لیے ابتدائی قیمت حاصل کرنے کے لیے getItems فنکشن کو کال کر رہے ہیں۔

import React from "react";
import { useState } from "react";
function ListItems() { const getItems = () => { console.log(`%c getItems called`, "color:hotpink"); return Array(50).fill(0); }; const [items, setItems] = useState(getItems()); return ( <div className="card"> <ul> {items.map((item, index) => ( <li key={index}>Item {index + 1} </li>))} </ul> <button onClick={() => setItems([...items, 0])}>Add Item</button> </div> );
} export default ListItems;

یہ فنکشن سائز 50 کے ساتھ ایک صف بناتا ہے اور صف کو صفر سے بھرتا ہے۔ نیچے دی گئی تصویر کا حوالہ دیں۔

اس کے بعد یہ آئٹمز اسکرین پر ظاہر ہوتے ہیں۔

سب کچھ ٹھیک لگ رہا ہے لیکن ہمارے یہاں ایک مسئلہ ہے۔

اس آئٹم شامل کریں فہرست میں ایک نیا آئٹم شامل کرنے کے لیے بٹن (آئٹمز کی فہرست کے بعد واقع ہے)۔ نوشتہ جات کا مشاہدہ کریں۔

انیشیلائزر فنکشن کے بغیر

کیا آپ یہاں مسئلہ دیکھتے ہیں؟

جب بھی آپ کوئی آئٹم شامل کرتے ہیں لاگ "getItems called" کنسول میں شامل ہوجاتا ہے۔ اس کا مطلب ہے کہ یہ فنکشن ہر رینڈر پر بلایا جا رہا ہے۔

یاد رکھیں کہ useState پہلی رینڈر کے بعد اس کو بھیجی گئی ابتدائی قدر کو نظر انداز کرتا ہے، لیکن یہاں ابتدائی قدر کا دوبارہ حساب لگایا جا رہا ہے۔ یہ مہنگا ہو سکتا ہے اگر ہم بڑی صفیں بنا رہے ہیں یا بھاری حساب لگا رہے ہیں۔

ہم گزر کر اس مسئلے کو حل کر سکتے ہیں۔ حاصل آئٹمز بطور _ ابتدا کرنے والا _ فنکشن

اب، آئیے کوڈ میں ایک چھوٹی سی تبدیلی کرتے ہیں۔

const [items, setItems] = useState(getItems);

انیشیلائزر فنکشن کے ساتھ

کوڈ سینڈ باکس میں کنسول ونڈو دیکھیں۔ نوٹ کریں کہ "getItems called" لاگ صرف پہلے رینڈر پر پرنٹ ہوتا ہے۔ جب بعد کے آئٹمز کو شامل کیا جاتا ہے تو یہ لاگ وہاں نہیں ہوتا ہے۔

اگرچہ دونوں مثالوں کے درمیان کوئی بصری فرق نہیں ہے، لیکن کارکردگی کے لحاظ سے وہ مختلف ہیں۔

یاد رکھیں جب آپ کو ابتدائی حالت کے لیے فنکشن کی ضرورت ہو تو ہمیشہ فنکشن کو پاس کریں یا فنکشن کو دوسرے فنکشن کے اندر کال کریں۔ کبھی بھی فنکشن کو براہ راست کال نہ کریں۔

✅ const [items, setItems] = useState(getItems);
✅ const [items, setItems] = useState(() => getItems());
❌ const [items, setItems] = useState(getItems());

میرے پاس کتنے یوز اسٹیٹ ہکس ہوسکتے ہیں۔

آپ کو کسی جزو کے اندر جتنے UseState ہکس کی ضرورت ہو اتنی زیادہ ہو سکتی ہے۔

کوڈ سینڈ باکس دیکھیں

ایک سے زیادہ استعمال اسٹیٹ ہکس

ذیل کے اجزاء میں تین مختلف ریاستیں ہیں - صارف نام، پاس ورڈ، KeepMeSignedIn۔

صارف نام، KeepMeSignedIn کی اقدار کو اپ ڈیٹ کرنے کی کوشش کریں۔ جب لاگ ان بٹن پر کلک کیا جاتا ہے تو اپ ڈیٹ شدہ ریاستیں کنسول میں لاگ ان ہوتی ہیں۔

جھلکیاں

• useState دوبارہ رینڈر کو متحرک کرنے اور دوبارہ رینڈر کے درمیان ریاست کو برقرار رکھنے کے لیے ایک طریقہ کار فراہم کرتا ہے۔
• اپڈیٹر فنکشن استعمال کریں جب آپ کو ضرورت ہو:
  • پچھلی ریاست کی بنیاد پر اگلی ریاست کا حساب لگائیں۔
  • اگلے رینڈر سے پہلے ریاست میں متعدد اپ ڈیٹس انجام دیں۔
• اگر ابتدائی حالت کسی فنکشن سے حاصل کی جاتی ہے تو - انیشیلائزر فنکشن کا نحو استعمال کریں۔
• ایک جزو کے اندر متعدد useState ہکس ہوسکتے ہیں۔

اس پوسٹ کو پسند کیا؟ اسے دوسروں کے ساتھ شیئر کریں۔
اصل میں میرے ذاتی بلاگ کے لیے لکھا گیا - https://gauravsen.com/use-state-hook

• SEO سے چلنے والا مواد اور PR کی تقسیم۔ آج ہی بڑھا دیں۔
• پلیٹو بلاک چین۔ Web3 Metaverse Intelligence. علم میں اضافہ۔ یہاں تک رسائی حاصل کریں۔
• ماخذ: https://www.codementor.io/gauravdgr81codementor/the-usestate-hook-a-comprehensive-guide-1w5d2830bm