React Native లో props మరియు state ఎలా పని చేస్తాయి?

Question

Accepted Answer

**Props** మరియు **state** React కోసం ప్రధాన భావనలు, ఇవి React Native లో సమానంగా పని చేస్తాయి: **props** డేటాను ఒక component లోకి పంపుతుంది (చదవడానికి మాత్రమే inputs), అయితే **state** సమయంతో మార్పుకు గురిచేసిన డేటాను కలిగి ఉంటుంది (re-renders ను ట్రిగర్ చేస్తుంది). వాటిని అర్థం చేసుకోవడం ప్రాథమికమైనది. ## Props — లోపలికి పంపిన డేటా (చదవడానికి మాత్రమే) ```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 vs 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 కోసం ప్రాథమికమైనది, ఎందుకంటే అవి **component ల ఎలా పని చేస్తాయి మరియు UIs ఎలా అప్‌డేట్ అవుతాయి అనే కేంద్ర React భావనలు**, కాబట్టి ఇది తప్పనిసరిగా తెలిసిన జ్ఞానం. **Props** (parent నుండి component లోకి పంపిన చదవడానికి-మాత్రమే డేటా, component tree క్రింద ప్రవహిస్తుంది) components బाहर నుండి కాన్ఫిగరేషన్ మరియు డేటాను పొందటానికి ఎలా, పునర్వినియోగపడు, కంపోజేబుల్ components ను ఎనబుల్ చేస్తుంది. **State** (అంతర్గతమైనది, చదవడానికి-మాత్రమే డేటా `useState` హుక్ ద్వారా నిర్వహించబడుతుంది, దానిని అప్‌డేట్ చేయడం re-render ను ట్రిగర్ చేస్తుంది) components సమయంతో మార్పుకు గురిచేసిన డేటాను (user input, toggles, fetched data) కలిగి ఉండటానికి మరియు ప్రతిస్పందించటానికి ఎలా — UIs మార్పులను ప్రతిబింబించే విధానం. **వ్యత్యాసం** — లోపలికి పంపిన props మరియు చదవడానికి-మాత్రమే (బాహ్య డేటా/కాన్ఫిగరేషన్ కోసం) వర్సెస్ state ఆంతర్గతమైనది మరియు చదవడానికి-మాత్రమే కాదు (డేటా కోసం మార్పుకు గురిచేసిన, driving re-renders) — మరియు **డేటా props ద్వారా క్రింద ప్రవహిస్తుంది అయితే state మార్పులు UI updates ను drive చేస్తాయి** అనే సూత్రం అర్థం చేసుకోవడం React Native (మరియు React) apps సరిగ్గా నిర్మించడానికి ప్రాథమికమైనది. ఇవి React for web కోసం సరిగ్గా ఉన్న భావనలు, కాబట్టి వాటిని అర్థం చేసుకోవడం నేరుగా బదిలీ అవుతుంది మరియు React Native components నిర్మించే ఎవరికైనా ఇది ఎసెన్షియల్. Props మరియు state సరిగ్గా పొందటం (props ద్వారా డేటాను పంపడం, state తో మార్పుకు గురిచేసిన డేటాను నిర్వహించడం, unidirectional data flow ను అర్థం చేసుకోవడం) ఫంక్షనల్, సరైన components కోసం కోర్. Props మరియు state React Native (మరియు React) components ఎలా పని చేస్తాయి — డేటాను పొందడం (props) మరియు UI updates ను drive చేయటానికి మార్పు నిర్వహించడం (state) కోసం కేంద్ర — మరియు వాటిని అర్థం చేసుకోవడం React Native app ను సరిగ్గా నిర్మించటానికి ప్రాథమికమైనది, props మరియు state ను అర్థం చేసుకోవడం ఎసెన్షియల్, ఫండేషనల్ React Native నాలెడ్జ్ — ప్రతి React Native డెవెలపర్ తప్పనిసరిగా అర్థం చేసుకోవలసిన కోర్ భావనలు, web React కు సమానమైనవి (కాబట్టి నాలెడ్జ్ బదిలీ అవుతుంది), మరియు డేటాను పొందే మరియు మార్పుకు ప్రతిస్పందించే components నిర్మించటానికి ప్రాథమికమైనది, React Native UI డెవెలప్‌మెంట్ యొక్క బేసిక్ మెకానిక్‌లు.