React Native میں props اور state کیسے کام کرتے ہیں؟

Question

Accepted Answer

**Props** اور **state** React کے بنیادی تصورات ہیں جو React Native میں بالکل یکساں طریقے سے کام کرتے ہیں: **props** ایک component میں ڈیٹا منتقل کرتے ہیں (صرف پڑھنے کے لیے inputs)، جبکہ **state** وہ ڈیٹا رکھتا ہے جو وقت کے ساتھ بدل سکتا ہے (re-renders کو trigger کرتے ہوئے)۔ ان کو سمجھنا بنیادی ہے۔ ## Props — منتقل کیا گیا ڈیٹا (صرف پڑھنے کے لیے) ```jsx // props are inputs passed to a component (from its parent) — READ-ONLY function UserCard({ name, age }) { // receives props return {name}, {age}; } // pass props when using the component // → props flow DOWN (parent → child); a component doesn't change its own props ``` ## State — ڈیٹا جو بدلتا ہے (useState کے ذریعے) ```jsx import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // declare state + its setter return ( setCount(count + 1)}> {count} {/* uses state */} ); } // → calling setCount updates state → component RE-RENDERS with the new value ``` State اندرونی، بدلنے کے قابل ڈیٹا ہے؛ اسے اپ ڈیٹ کرنا (useState سے setter کے ذریعے) ایک re-render کو trigger کرتا ہے — یہ ہے کہ UI تبدیلیوں کو کیسے ظاہر کرتا ہے۔ ## Props بمقابلہ state ```text PROPS → passed IN from the parent; READ-ONLY (the component doesn't change them); for configuration/data from outside STATE → internal to the component; CHANGEABLE (via setState/useState); triggers re-renders; for data that changes over time (user input, toggles, fetched data) → Data flows DOWN via props; state changes drive UI updates. (Same as React for web.) ``` ## یہ اہم کیوں ہے Props اور state کو سمجھنا React Native کے لیے بنیادی ہے کیونکہ یہ **core React concepts ہیں جو یہ مرکزی ہیں کہ components کیسے کام کرتے ہیں اور UIs کیسے اپ ڈیٹ ہوتے ہیں**، لہذا یہ ضروری معلومات ہے۔ **Props** (صرف پڑھنے کے لیے ڈیٹا جو ایک component میں اس کے parent سے منتقل ہوتا ہے، component tree کے نیچے بہتے ہوئے) یہ ہے کہ components بیرونی طور سے configuration اور ڈیٹا کیسے حاصل کرتے ہیں، reusable، composable components کو enabled کرتے ہوئے۔ **State** (اندرونی، بدلنے کے قابل ڈیٹا جو `useState` hook کے ذریعے منیجڈ ہو، جہاں اسے اپ ڈیٹ کرنا ایک re-render کو trigger کرتا ہے) یہ ہے کہ components کیسے اندرونی ڈیٹا کو رکھتے اور جوابی کرتے ہیں جو وقت کے ساتھ بدلتا ہے (user input، toggles، fetched data) — یہ طریقہ جس سے UIs تبدیلیوں کو ظاہر کرتے ہیں۔ **فرق** کو سمجھنا — props میں منتقل اور صرف پڑھنے کے لیے (بیرونی ڈیٹا/configuration کے لیے) بمقابلہ state کے اندرونی اور بدلنے کے قابل (ڈیٹا کے لیے جو بدلتا ہے، re-renders کو drive کرتے ہوئے) — اور یہ اصول کہ **ڈیٹا props کے ذریعے نیچے بہتا ہے جبکہ state کی تبدیلیاں UI updates کو drive کرتی ہیں** React Native (اور React) apps کو صحیح طریقے سے بنانے کے لیے بنیادی ہے۔ یہ بالکل وہی concepts ہیں جیسے web کے لیے React، لہذا ان کو سمجھنا براہ راست منتقل ہوتا ہے اور React Native components بناتے ہوئے کسی کے لیے بھی ضروری ہے۔ Props اور state کو صحیح طریقے سے حاصل کرنا (props کے ذریعے ڈیٹا منتقل کرنا، state کے ساتھ بدلتے ہوئے ڈیٹا کو منیج کرنا، یک طرفہ ڈیٹا flow کو سمجھنا) functional، صحیح components کے لیے core ہے۔ چونکہ props اور state React Native (اور React) components کیسے کام کرتے ہیں اس کے لیے مرکزی ہیں — ڈیٹا حاصل کرنا (props) اور تبدیلی کو منیج کرنا (state) UI updates کو drive کرتے ہوئے — اور انہیں سمجھنا کسی بھی React Native app کو صحیح طریقے سے بنانے کے لیے بنیادی ہے، props اور state کو سمجھنا ضروری، بنیادی React Native معلومات ہے — core concepts جو ہر React Native developer کو سمجھنا چاہیے، web React کے یکساں (لہذا معلومات منتقل ہوتی ہے)، اور اپنے طور پر components بنانے کے لیے بنیادی جو ڈیٹا حاصل کرتے ہیں اور تبدیلی کے لیے جوابی ہوتے ہیں، React Native UI development کا بنیادی میکانکس۔