Props ایک کمپوننٹ کے والد کی طرف سے کمپوننٹ میں منتقل کیے جانے والے inputs ہیں (بچے کے نقطہ نظر سے صرف پڑھنے کے لیے)۔ State وہ ڈیٹا ہے جو کمپوننٹ اپنے آپ میں رکھتا اور منیج کرتا ہے (وہ اسے تبدیل کر سکتا ہے)۔ فرق: props باہر سے آتے ہیں اور کمپوننٹ کے اندر تبدیل نہیں ہوتے؛ state داخلی اور قابل تبدیل ہے۔
() {
;
}
< name= />
Props والد سے بچے کے طرف نیچے بہتے ہیں۔ بچہ انہیں پڑھتا ہے لیکن انہیں تبدیل نہیں کر سکتا — prop کی قدر تبدیل کرنے کے لیے، والد کو ایک نیا منتقل کرنا ہوگا۔
function Counter() {
const [count, setCount] = useState(0); // `count` is this component's own state
return <button onClick={() => setCount(count + 1)}>{count}</button>;
// the component updates its OWN state via setCount
}
State کمپوننٹ کے اندر بنایا اور کنٹرول کیا جاتا ہے؛ کمپوننٹ اسے تبدیل کرتا ہے (setCount/setState کے ذریعے)، اور اسے تبدیل کرنے سے دوبارہ رینڈر ہوتا ہے۔
Props State
Source passed from parent created in the component
Mutable? read-only (in child) yes (via setter)
Who controls it the parent the component itself
Triggers render when the parent changes it when the component updates it
Purpose configure/pass data in track changing internal data
function Parent() {
const [user, setUser] = useState({ name: "Ann" }); // STATE in the parent
return <Child name={user.name} />; // passed DOWN as a PROP
}
ایک کمپوننٹ کی state اکثر بچے کو prop کے طور پر منتقل کی جاتی ہے۔ State کو اوپر اٹھانا اور نیچے منتقل کرنا بالکل یہی نمونہ ہے — والد state کو رکھتا ہے، بچوں کو یہ props کے طور پر ملتا ہے۔
State اور props میں فرق کمپوننٹ پر مبنی frameworks میں بنیادی ہے۔
یہ ڈیٹا کی مالکانہ حق اور بہاؤ کی تعریف کرتا ہے: props بیرونی، صرف پڑھنے کے لیے تشکیل ہیں (ڈیٹا نیچے)؛ state داخلی، قابل تبدیل ڈیٹا ہے جو کمپوننٹ منیج کرتا ہے۔
انہیں الجھانا — props کو تبدیل کرنا، یا props کو state میں ڈپلیکیٹ کرنا — کلاسیک بگ کا سبب بنتا ہے۔
یہ سمجھنا کہ ڈیٹا props کے طور پر نیچے بہتا ہے جبکہ ہر کمپوننٹ اپنی state کی مالکانہ حق رکھتا ہے، React/Vue/Angular کمپوننٹ ڈیزائن کی بنیاد ہے۔