State और Props में अंतर
State एक component की अपनी private diary है, जबकि props वे letters हैं जो इसे अपने parent से मिलते हैं -- एक इसे control करता है, दूसरा यह बस पढ़ता है।
In this page:
Syntax
function Parent() {
const [state, setState] = useState(initialValue); // owned and changeable
return <Child prop={state} />;
}
function Child({ prop }) { // received, read-only
return <element>{prop}</element>;
}State: Owned और Changeable
State उस component की होती है जो इसे useState से declare करता है, और सिर्फ वह component इसे (अपने setter function के through) change कर सकता है। यह उस data को represent करता है जो component के lifetime भर change हो सकता है, जैसे एक counter या form input value।
Note:
अगर एक component को समय के साथ एक value अपने आप remember और change करने की ज़रूरत है, यह एक sign है कि यह state होनी चाहिए।
Warning:
एक component सिर्फ अपने OWN state को directly update कर सकता है -- यह एक अलग component में पहुंचकर इसकी state change नहीं कर सकता।
उदाहरण: State: Owned and Changeable
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Counter() {
const [count, setCount] = React.useState(0); // owned by Counter
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Counter />);
</script>
</body>
</html>Props: Received और Read-Only
Props वे values हैं जो एक component को इसके parent से दी जाती हैं -- receive करने वाला component उन्हें पढ़ सकता है लेकिन कभी modify नहीं कर सकता। अगर एक prop की value को change होना है, वह change parent में होना चाहिए, जो फिर एक नई value नीचे pass करता है।
Note:
अगर एक value component के 'बाहर' से आती है (इसे use करने वाले से), यह एक prop है, state नहीं।
Warning:
Receiving component के अंदर एक 'prop update' करने की कोशिश करना एक conceptual mistake है -- receiving component इसे own नहीं करता।
उदाहरण: Props: Received and Read-Only
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Display({ label }) { // label is a prop, read-only here
return <p>{label}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Display label="I am a prop" />);
</script>
</body>
</html>State और Props के बीच Decide करना
एक simple test: अगर एक component को समय के साथ एक value खुद track और change करनी है, यह state है; अगर एक value एक parent से component को configure या inform करने के लिए नीचे दी गई है, यह एक prop है। कई असली components दोनों साथ use करते हैं।
Note:
पूछें 'यह value change करने के लिए कौन responsible है?' -- अगर answer 'यह component खुद' है, यह state है।
Warning:
एक common design mistake data को state में रखना है जब इसे असल में props से derive किया जाना चाहिए, उन्हें out of sync होने का कारण बनाते हुए।
उदाहरण: Deciding Between State and Props
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Greeting({ name }) { // prop: comes from parent
const [likes, setLikes] = React.useState(0); // state: owned locally
return (
<div>
<p>Hello, {name}! Likes: {likes}</p>
<button onClick={() => setLikes(likes + 1)}>Like</button>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Greeting name="Sam" />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- receiving component के अंदर एक prop modify करने की कोशिश करना, state lift up करने या इसे local state में copy करने के बजाय।
- यह confuse करना कि कौन सा component एक value owns करता है -- state उस component की होती है जो इसे declare करता है, props उसकी होते हैं जो उन्हें receive करता है।
- यह मान लेना कि एक component के props अपने आप change होंगे -- वे सिर्फ तब change होते हैं जब parent नई values के साथ re-render करता है।
चैप्टर सारांश
- State वह data है जो एक component internally useState से manage करता है।
- Props वह data है जो एक component को इसके parent से pass किया जाता है।
- State mutable है (इसके setter के through); props child के perspective से read-only हैं।
- एक value का owner -- state या props -- decide करता है कि इसे update करने के लिए कौन responsible है।
ब्राउज़र सपोर्ट
कोई browser-specific restrictions नहीं -- सभी React versions के लिए fundamental एक conceptual distinction।
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: