React Native में props और state कैसे काम करते हैं?

Question

Accepted Answer

**Props** और **state** मुख्य React concepts हैं जो React Native में समान रूप से काम करते हैं: **props** एक component में data पास करते हैं (read-only inputs), जबकि **state** उस data को रखता है जो समय के साथ बदल सकता है (re-renders को trigger करता है)। इन्हें समझना मूलभूत है। ## Props — पास किया गया data (read-only) ```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 — बदलने वाला data (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 आंतरिक, बदलने योग्य data है; इसे update करना (`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 के लिए मूलभूत है क्योंकि वे **मुख्य React concepts हैं जो इस बात के केंद्र में हैं कि components कैसे काम करते हैं और UIs कैसे update होते हैं**, इसलिए यह अवश्य-जानने योग्य ज्ञान है। **Props** (एक component में उसके parent से पास किया गया read-only data, component tree में नीचे की ओर प्रवाहित होता हुआ) वह तरीका है जिससे components बाहर से configuration और data प्राप्त करते हैं, जिससे पुन: प्रयोज्य, composable components सक्षम होते हैं। **State** (`useState` hook के माध्यम से प्रबंधित आंतरिक, बदलने योग्य data, जहाँ इसे update करना एक re-render को trigger करता है) वह तरीका है जिससे components समय के साथ बदलते हुए data (user input, toggles, fetched data) को रखते और उस पर प्रतिक्रिया करते हैं — वह mechanism जिसके द्वारा UIs बदलावों को दर्शाते हैं। **अंतर** समझना — props पास किए गए और read-only (बाहरी data/configuration के लिए) बनाम state आंतरिक और बदलने योग्य होना (बदलते हुए data के लिए, re-renders को चलाना) — और यह सिद्धांत कि **data props के माध्यम से नीचे प्रवाहित होता है जबकि state बदलाव UI updates को चलाते हैं** React Native (और React) apps को सही ढंग से बनाने के लिए मूलभूत है। ये ठीक web के लिए React के समान concepts हैं, इसलिए इन्हें समझना सीधे हस्तांतरित होता है और React Native components बनाने वाले किसी भी व्यक्ति के लिए आवश्यक है। Props और state को सही करना (props के माध्यम से data पास करना, state के साथ बदलते हुए data का प्रबंधन करना, unidirectional data flow को समझना) कार्यात्मक, सही components के लिए मुख्य है। चूँकि props और state इस बात के केंद्र में हैं कि React Native (और React) components कैसे काम करते हैं — data प्राप्त करना (props) और बदलाव का प्रबंधन करना (state) ताकि UI updates चलें — और इन्हें समझना किसी भी React Native app को सही ढंग से बनाने के लिए मूलभूत है, props और state समझना आवश्यक, मूलभूत React Native ज्ञान है — मुख्य concepts जिन्हें हर React Native developer को समझना चाहिए, web React के समान (इसलिए ज्ञान हस्तांतरित होता है), और data प्राप्त करने तथा बदलाव पर प्रतिक्रिया करने वाले components बनाने के लिए मूलभूत, React Native UI development की बुनियादी क्रियाविधि।