state आणि props मधील फरक काय आहे?

Question

Accepted Answer

**Props** हे इनपुट आहेत जे पालक घटकातून मुलाच्या घटकामध्ये **पास केले जातात** (मुलाच्या दृष्टिकोनातून केवळ वाचनीय). **State** हा डेटा आहे जो घटक **मालकीच्या आणि अंतर्गत व्यवस्थापित करतो** (तो त्यात बदल करू शकतो). फरक: props बाहेरून आतात आणि घटकांमध्ये बदलत नाहीत; state अंतर्गत आणि बदलणारा आहे. ## Props — पास केलेले, केवळ वाचनीय ```jsx function Greeting({ name }) { // `name` is a prop from the parent return

Hello, {name}

; // name = "Bob"; // ❌ a child must NOT modify its props } // parent supplies the prop ``` Props पालक ते मुलाच्या बाजूने **खाली** वाहतात. मुल त्यांना वाचतो परंतु त्यात बदल करू शकत नाही — prop मूल्य बदलण्यासाठी, पालकाने नवीन एक पास करणे आवश्यक आहे. ## State — अंतर्गत मालकीचे, बदलणारे ```jsx function Counter() { const [count, setCount] = useState(0); // `count` is this component's own state return ; // the component updates its OWN state via setCount } ``` State घटकाच्या *अंदरून* तयार केले जाते आणि नियंत्रित केले जाते; घटक त्यात बदल करतो (`setCount`/`setState` द्वारे), आणि त्यात बदल करणे पुनरावृत्ती-रेंडर ट्रिगर करते. ## बाजूला-बाजू ```text 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 ``` ## ते एकत्र कार्य करतात ```jsx function Parent() { const [user, setUser] = useState({ name: "Ann" }); // STATE in the parent return ; // passed DOWN as a PROP } ``` एका घटकाचे **state** अनेकदा मुलाच्या घटकामध्ये **prop** म्हणून पास केले जाते. state वर काढणे आणि खाली पास करणे हेच या पद्धतीचे – पालक state मालकीच्या ठेवतात, मुले त्यांना props म्हणून प्राप्त करतात. ## हे महत्वाचे का आहे State-vs-props फरक घटक-आधारित फ्रेमवर्कमध्ये मूलभूत आहे. हे डेटा स्वामित्व आणि प्रवाह परिभाषित करते: props हे बाह्य, केवळ-वाचनीय कॉन्फिगरेशन आहेत (डेटा खाली); state हा अंतर्गत, बदलणारा डेटा आहे जो घटक व्यवस्थापित करतो. ते गोंधळात टाकणे — props मध्ये बदल करणे, किंवा props state मध्ये डुप्लिकेट करणे — शास्त्रीय बग्‌स निर्माण करते. हे समजणे की डेटा props म्हणून खाली वाहतो तर प्रत्येक घटक आपना state मालकीच्या ठेवतो हे React/Vue/Angular घटक डिজाइनचा बेड रॉक आहे.