React Native मा props र state कसरी काम गर्छन्?

Question

Accepted Answer

**Props** र **state** React का मुख्य अवधारणाहरू हुन् जो React Native मा समान रूपमा काम गर्छन्: **props** एक component मा डेटा पास गर्छ (read-only inputs), जबकि **state** डेटा राख्छ जो समय अनुसार परिवर्तन हुन सक्छ (re-renders ट्रिगर गर्दै)। यसलाई बुझ्नु आधारभूत छ। ## Props — डेटा पास गरिएको (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 — डेटा जो परिवर्तन हुन्छ (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 ट्रिगर गर्छ — कसरी 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 को मुख्य अवधारणा हो जो components कसरी काम गर्छन् र UIs कसरी अपडेट हुन्छन् भन्ने कुरामा केन्द्रीय छ**, त्यसैले यो आवश्यक ज्ञान हो। **Props** (एक component मा यसको अभिभावकबाट पास गरिएको read-only डेटा, component tree तल बग्दै) को माध्यमले components बाहिरबाट configuration र डेटा प्राप्त गर्छन्, पुनर्प्रयोगयोग्य, composable components सक्षम गर्दै। **State** (आन्तरिक, परिवर्तनशील डेटा `useState` हुकको माध्यमले व्यवस्थित गरिएको, जहाँ यसलाई अपडेट गर्नु re-render ट्रिगर गर्छ) यो हो कि कसरी components डेटा राख्छन् र जवाफ दिन्छन् जो समय अनुसार परिवर्तन हुन्छ (user input, toggles, fetched डेटा) — यु UIs ले परिवर्तनहरू प्रतिबिम्बित गर्ने संयन्त्र। अन्तर बुझ्नु — props पास गरिएको र read-only (बाहिरी डेटा/configuration को लागि) बनाम state आन्तरिक र परिवर्तनशील (डेटा जो परिवर्तन हुन्छ, re-renders चलित गर्दै) को लागि — र सिद्धान्त कि **डेटा props मार्फत तल बग्छ जबकि state परिवर्तनहरु UI अपडेट चलित गर्छन्** React Native (र React) apps सही रूपमा निर्माण गर्न आधारभूत छ। यो React वेबको समान अवधारणाहरू हुन्, त्यसैले यसलाई बुझ्नु सीधै transfer हुन्छ र कोही पनि React Native components निर्माण गर्ने व्यक्तिको लागि आवश्यक छ। Props र state सही पाउनु (props मार्फत डेटा पास गर्नु, state सँग परिवर्तन व्यवस्थित गर्नु, unidirectional डेटा बहाब्यबस्था बुझ्नु) कार्यात्मक, सही components को मूल हो। Props र state React Native (र React) components मा कसरी काम गर्छन् भन्ने कुरामा केन्द्रीय छन् — डेटा प्राप्त गर्दै (props) र परिवर्तन व्यवस्थित गर्दै (state) UI अपडेटहरु चलित गर्दै — र यसलाई बुझ्नु कुनै पनि React Native app सही रूपमा निर्माण गर्न आधारभूत छ, props र state को बुझाइ आवश्यक, आधारभूत React Native ज्ञान हो — मुख्य अवधारणाहरु हरेक React Native developer ले बुझ्नु पर्छ, वेब React को समान (त्यसैले ज्ञान transfer हुन्छ), र डेटा प्राप्त गर्ने र परिवर्तनमा जवाफ दिने components निर्माण गर्न आधारभूत, React Native UI विकासको आधारभूत संयन्त्र।