Props अपने माता-पिता द्वारा एक घटक में पारित इनपुट हैं (बच्चे के दृष्टिकोण से केवल-पढ़ना)। 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-vs-props अंतर घटक-आधारित फ्रेमवर्क के लिए मौलिक है।
यह डेटा स्वामित्व और प्रवाह को परिभाषित करता है: props बाहरी, केवल-पढ़ना कॉन्फ़िगरेशन है (डेटा नीचे की ओर); state आंतरिक, परिवर्तनीय डेटा है जिसे घटक प्रबंधित करता है।
उन्हें भ्रमित करना — props को परिवर्तित करना, या props को state में डुप्लिकेट करना — क्लासिक बग्स का कारण बनता है।
यह समझना कि डेटा props के रूप में नीचे की ओर बहता है जबकि प्रत्येक घटक अपना state रखता है, यह React/Vue/Angular घटक डिज़ाइन की नींव है।