Props vs State in React: Difference Aur Real Examples (in Hindi)

क्या आपका React app बार-बार बेवजह re-render हो रहा है? या फिर आप इस बात को लेकर उलझन में हैं कि डेटा को कब Props के जरिए पास करना चाहिए और कब उसे component की local State में स्टोर करना चाहिए? दोस्तों, ReactJS सीखते समय यह कन्फ्यूजन लगभग हर डेवलपर को होती है। जब हम एक स्केलेबल और हाई-परफॉर्मेंस ReactJS एप्लीकेशन बनाना चाहते हैं, तो इन दोनों के बीच के बारीक अंतर को समझना बेहद जरूरी हो जाता है। इस कंपलीट गाइड में, हम सिर्फ थ्योरी की बात नहीं करेंगे। हम एकदम गहराई में जाकर रियल-वर्ल्ड कोडिंग एग्जांपल्स, कॉमन error, और बेस्ट परफॉर्मेंस प्रैक्टिसेज के साथ समझेंगे कि इन दोनों का इस्तेमाल कब, क्यों और कैसे करना है। तो चलिए अपनी चाय का कप उठाइए, और इस मास्टर-क्लास को शुरू करते हैं! ---

React में Props क्या है और यह कैसे काम करता है?

दोस्तों, सबसे पहले बात करते हैं Props की। "Props" का मतलब होता है "Properties"। सरल शब्दों में कहें तो, Props एक जरिया हैं जिसके जरिए हम React में एक component से दूसरे component (आमतौर पर Parent से Child component) में डेटा भेजते हैं। यदि आप HTML जानते हैं, तो आपने <img src="image.png" /> जैसा कोड जरूर देखा होगा। यहाँ src एक attribute है। React में, Props बिल्कुल इसी तरह काम करते हैं। वे custom attributes की तरह होते हैं जिन्हें हम अपने custom React components को पास करते हैं।

Props की मुख्य विशेषताएं (Core Features of Props):

• Immutable (अपरिवर्तनीय): Props "Read-Only" होते हैं। इसका मतलब है कि कोई भी child component अपने पास आए हुए props की वैल्यू को डायरेक्ट चेंज नहीं कर सकता। अगर आप ऐसा करने की कोशिश करेंगे, तो React आपको कंसोल में एरर दिखा देगा।
• Unidirectional Data Flow: React में डेटा का बहाव हमेशा ऊपर से नीचे की तरफ (Parent to Child) होता है। Props इसी फ्लो को फॉलो करते हैं।
• Component Reusability: Props का मुख्य काम components को dynamic और reusable बनाना है। एक ही UI स्ट्रक्चर में अलग-अलग डेटा दिखाकर हम कोड डुप्लीकेशन से बचते हैं।

चलिए, इसे एक बहुत ही आसान उदाहरण से समझते हैं। मान लीजिए हमारे पास एक WelcomeCard नाम का child component है, और हम उसे App (Parent) component से यूजर का नाम भेजना चाहते हैं:

// Child Component: WelcomeCard.jsx
import React from 'react';

function WelcomeCard(props) {
    // ध्यान दें: props यहाँ एक object के रूप में प्राप्त होता है
    return (
        <div className="card" style={{ border: '1px solid #ccc', padding: '16px', margin: '10px' }}>
            <h3>नमस्ते, {props.username}!</h3>
            <p>आपका हमारे डेवलपर कम्युनिटी में स्वागत है।</p>
        </div>
    );
}

export default WelcomeCard;

अब हम इस child component को अपने Parent component में इम्पोर्ट करेंगे और अलग-अलग Props पास करेंगे:

// Parent Component: App.jsx
import React from 'react';
import WelcomeCard from './WelcomeCard';

function App() {
    return (
        <div className="app-container" style={{ padding: '20px' }}>
            <h1>React Props Demonstration</h1>
            {/* यहाँ हम अलग-अलग props पास कर रहे हैं */}
            <WelcomeCard username="Amit Sharma" />
            <WelcomeCard username="Priya Patel" />
            <WelcomeCard username="Vikram Singh" />
        </div>
    );
}

export default App;

देखा आपने? हमने component को सिर्फ एक बार लिखा, लेकिन Props का उपयोग करके हमने तीन अलग-अलग नामों के साथ इसे रेंडर कर लिया। यही है Props की असली ताकत! ---

React में State क्या है और इसकी जरूरत क्यों पड़ती है?

अब आप सोच रहे होंगे कि, "भाई, अगर Props से डेटा पास हो ही रहा है, तो फिर State की क्या जरूरत है?" दोस्तों, जरा सोचिए: अगर आपके यूजर को किसी बटन पर क्लिक करके स्क्रीन का कलर बदलना हो, या किसी फॉर्म में इनपुट टाइप करना हो, या फिर शॉपिंग कार्ट में आइटम्स की संख्या बढ़ानी हो, तो क्या केवल Props से काम चलेगा? बिल्कुल नहीं! क्योंकि Props को बदला नहीं जा सकता (Immutable)। यहाँ एंट्री होती है State की। State, React component की अपनी local memory होती है। यह component का वो डेटा होल्ड करती है जो समय के साथ यूजर के इंटरैक्शन (जैसे click, hover, input changes) या API calls के कारण बदल सकता है। जब भी component की state अपडेट होती है, React तुरंत समझ जाता है कि UI को अपडेट करने की जरूरत है, और वह उस component को फिर से render (re-render) कर देता है।

State की मुख्य विशेषताएं (Core Features of State):

• Mutable (परिवर्तनीय): State को बदला जा सकता है, लेकिन इसे कभी भी सीधे मॉडिफाई (directly mutate) नहीं करना चाहिए। इसे अपडेट करने के लिए हमेशा React द्वारा दिए गए state updater function (जैसे setState या useState Hook का setter function) का ही उपयोग किया जाना चाहिए।
• Local & Encapsulated: State पूरी तरह से उस component के अंदर ही सीमित होती है जिसमें इसे डिक्लेअर किया गया है। कोई बाहरी component सीधे इसे एक्सेस या चेंज नहीं कर सकता।
• Triggers Re-render: जब भी state की वैल्यू बदलती है, React का Virtual DOM एक्टिवेट हो जाता है और स्क्रीन पर सिर्फ उस बदले हुए हिस्से को अपडेट कर देता है।

चलिए, functional components में इस्तेमाल होने वाले useState Hook की मदद से एक लाइव काउंटर का उदाहरण देखते हैं:

// Counter.jsx
import React, { useState } from 'react';

function Counter() {
    // useState Hook की मदद से state को डिक्लेअर करना
    // count -> current state की वैल्यू है
    // setCount -> state को सुरक्षित रूप से अपडेट करने का फंक्शन है
    const [count, setCount] = useState(0);

    const increment = () => {
        setCount(count + 1);
    };

    const decrement = () => {
        if (count > 0) {
            setCount(count - 1);
        }
    };

    return (
        <div className="counter-box" style={{ textAlign: 'center', padding: '20px', border: '2px solid #06b6d4', borderRadius: '8px' }}>
            <h2>इंटरैक्टिव काउंटर (Local State)</h2>
            <p style={{ fontSize: '24px', fontWeight: 'bold' }}>Value: {count}</p>
            <button onClick={increment} style={{ marginRight: '10px', padding: '8px 16px' }}>बढ़ाएं (+)</button>
            <button onClick={decrement} style={{ padding: '8px 16px' }}>घटाएं (-)</button>
        </div>
    );
}

export default Counter;

इस काउंटर के उदाहरण में, जैसे ही आप "बढ़ाएं (+)" बटन पर क्लिक करते हैं, setCount फंक्शन चलता है, count की state बदलती है, और React तुरंत UI को अपडेट करके नई वैल्यू स्क्रीन पर दिखा देता है। ---

Props vs State in React: दोनों के बीच मुख्य अंतर क्या है?

दोनों कॉन्सेप्ट्स को अच्छे से समझने के बाद, आइए इनके बीच के अंतर को एक क्लियर, स्ट्रक्चर्ड टेबल के माध्यम से समझते हैं। Google पर अक्सर लोग इसी तुलना को सर्च करते हैं, इसलिए इसे ध्यान से देखें:

Feature (विशेषता)	Props (प्रॉप्स)	State (स्टेट)
परिभाषा (Definition)	यह बाहर से (Parent component) आने वाला डेटा है।	यह component की अपनी internal memory और डेटा है।
Mutablility (बदलाव)	Immutable (इसे बदला नहीं जा सकता, यह Read-Only है)।	Mutable (इसे updater function के जरिए बदला जा सकता है)।
Pass as Parameters?	हाँ, इसे parent component द्वारा फंक्शन आर्गुमेंट्स की तरह पास किया जाता है।	नहीं, इसे component के अंदर ही क्रिएट और मैनेज किया जाता है।
Re-renders?	अगर parent से आने वाले props की वैल्यू बदलती है, तो child re-render होता है।	जब भी local state बदलती है, component तुरंत re-render होता है।
Use Case	Static या dynamic configuration डेटा पास करने के लिए।	User inputs, checkboxes, open/close status, timers आदि ट्रैक करने के लिए।

इस टेबल को देखकर आपको समझ आ गया होगा कि Props और State वास्तव में एक दूसरे के विरोधी नहीं, बल्कि एक दूसरे के पूरक (complementary) हैं। वे दोनों मिलकर ही एक बेहतरीन MERN Stack एप्लीकेशन के फ्रंटएंड को मजबूती प्रदान करते हैं। ---

Real-world Example: Props और State का एक साथ इस्तेमाल कैसे करें?

डेवलपर दोस्तों, असली मजा तब आता है जब हम इन दोनों को एक साथ एक ही एप्लीकेशन में काम करते हुए देखते हैं। चलिए एक प्रैक्टिकल, रियल-वर्ल्ड सिचुएशन लेते हैं: **एक शॉपिंग कार्ट (Product Cart List)**। हम यहाँ दो components बनाएंगे: 1. ProductList (Parent Component): यह प्रोडक्ट्स का डेटा (State) मैनेज करेगा और उन्हें रेंडर करेगा। 2. ProductCard (Child Component): यह Parent से प्रोडक्ट की डिटेल्स (Props) लेगा और अपनी खुद की "Quantity" की लोकल स्टेट (State) को संभालेगा। यह उदाहरण बिल्कुल वैसा ही है जैसा हम प्रोडक्शन लेवल ऐप्स में लिखते हैं। कोड को ध्यान से देखें:

// Child Component: ProductCard.jsx
import React, { useState } from 'react';

function ProductCard({ name, price, category }) {
    // यहाँ हमने ES6 destructuring का इस्तेमाल करके सीधे Props से values निकाल ली हैं।
    // इसके अलावा, हम कार्ट आइटम की संख्या को ट्रैक करने के लिए local state का उपयोग कर रहे हैं।
    const [quantity, setQuantity] = useState(0);

    const handleAdd = () => {
        setQuantity(quantity + 1);
    };

    const handleRemove = () => {
        if (quantity > 0) {
            setQuantity(quantity - 1);
        }
    };

    return (
        <div style={{
            border: '1px solid #e2e8f0',
            borderRadius: '8px',
            padding: '16px',
            margin: '12px',
            backgroundColor: '#ffffff',
            boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1)'
        }}>
            <span style={{ fontSize: '12px', color: '#64748b', textTransform: 'uppercase', fontWeight: 'bold' }}>
                {category}
            </span>
            <h3 style={{ margin: '8px 0', color: '#1e293b' }}>{name}</h3>
            <p style={{ color: '#0f172a', fontWeight: '600' }}>कीमत: ₹{price}</p>
            
            <div style={{ marginTop: '14px', display: 'flex', alignItems: 'center', gap: '10px' }}>
                <button 
                    onClick={handleRemove} 
                    style={{ padding: '6px 12px', backgroundColor: '#ef4444', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
                >
                    -
                </button>
                <span style={{ fontWeight: 'bold', fontSize: '18px' }}>{quantity}</span>
                <button 
                    onClick={handleAdd} 
                    style={{ padding: '6px 12px', backgroundColor: '#22c55e', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
                >
                    +
                </button>
            </div>

            {quantity > 0 && (
                <p style={{ color: '#0284c7', marginTop: '10px', fontSize: '14px' }}>
                    कुल योग: ₹{price * quantity}
                </p>
            )}
        </div>
    );
}

export default ProductCard;

अब हम अपना मुख्य Parent component बनाएंगे जो डेटा की लिस्ट को स्टोर करेगा और उसे Props के जरिए नीचे ट्रांसफर करेगा:

// Parent Component: ProductList.jsx
import React, { useState } from 'react';
import ProductCard from './ProductCard';

function ProductList() {
    // प्रोडक्ट्स की लिस्ट जो कि Parent की State है
    const [products] = useState([
        { id: 1, name: "Apple iPhone 15", price: 79999, category: "Electronics" },
        { id: 2, name: "Sony WH-1000XM5 Headphones", price: 29999, category: "Audio" },
        { id: 3, name: "Ergonomic Office Chair", price: 12499, category: "Furniture" }
    ]);

    return (
        <div style={{ padding: '24px', fontFamily: 'sans-serif', backgroundColor: '#f8fafc', minHeight: '100vh' }}>
            <h1 style={{ color: '#0f172a', textAlign: 'center' }}>हमारा गैजेट्स स्टोर (Props & State Combo)</h1>
            <p style={{ textAlign: 'center', color: '#64748b' }}>
                यह पूरा पेज Parent state से रेंडर हो रहा है, और प्रत्येक कार्ड अपनी local state को मैनेज कर रहा है।
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', marginTop: '20px' }}>
                {products.map((product) => (
                    <ProductCard 
                        key={product.id} 
                        name={product.name} 
                        price={product.price} 
                        category={product.category} 
                    />
                ))}
            </div>
        </div>
    );
}

export default ProductList;

इस लाइव प्रोजेक्ट में क्या हो रहा है?

1. Parent component (ProductList) के पास प्रोडक्ट्स की लिस्ट की एक State है।
2. यह Parent component, .map() लूप का इस्तेमाल करके हर एक प्रोडक्ट की जानकारी को child component (ProductCard) को Props के रूप में पास करता है।
3. प्रत्येक ProductCard अपने खुद के quantity काउंटर को Local State के जरिए मैनेज करता है।
4. यदि आप "iPhone 15" वाले कार्ड का काउंटर बढ़ाते हैं, तो सिर्फ वही कार्ड re-render होता है। बाकी के कार्ड्स वैसे ही रहते हैं। यह React की जबरदस्त परफॉर्मेंस का लाइव सबूत है!

---

React State और Props का इस्तेमाल करते समय होने वाली Common Errors और उनका Solution

दोस्तों, जब आप कोडिंग करेंगे तो कुछ गलतियाँ ऐसी होंगी जो आपका काफी समय बर्बाद कर सकती हैं। आइए उन पर पहले ही नजर डाल लेते हैं ताकि आपका समय बच सके।

1. Direct State Mutation (स्टेट को सीधे बदलना)

यह सबसे कॉमन भूल है जो नए डेवलपर्स अक्सर करते हैं।

// ❌ गलत तरीका - Direct Mutation
const [user, setUser] = useState({ name: 'Rohit', age: 25 });
user.name = 'Rahul'; // React को पता ही नहीं चलेगा कि कुछ बदला है, और UI re-render नहीं होगा!

Solution (सही तरीका): हमेशा setter function का उपयोग करें और object को spread operator की मदद से कॉपी करें:

//  सही तरीका
const [user, setUser] = useState({ name: 'Rohit', age: 25 });
setUser({ ...user, name: 'Rahul' }); // React तुरंत re-render ट्रिगर कर देगा

2. Child Component में Props को री-असाइन करने की कोशिश करना

चूंकि Props immutable होते हैं, इसलिए उन्हें डायरेक्ट बदलने पर एरर आती है।

// ❌ गलत तरीका
function UserProfile(props) {
    props.role = "Admin"; // Error: Cannot assign to read only property
    return <div>{props.role}</div>;
}

Solution (सही तरीका): अगर आपको parent से मिले हुए डेटा को एडिट करना है, तो या तो उसे child की local state में इनिशियलाइज़ करें, या फिर parent से एक callback function पास करें जो parent की state को बदले।

3. Stale State Update (स्टेट की पुरानी वैल्यू के साथ गणना करना)

कई बार जब आप तेजी से state अपडेट करते हैं (जैसे एक के बाद एक क्लिक), तो React asynchronous updates की वजह से पुराना डेटा ही दिखा देता है।

// ❌ रिस्की तरीका
setCount(count + 1);
setCount(count + 1); // यह दोनों बार पुरानी 'count' वैल्यू उठा सकता है

Solution (सही तरीका): Functional updates का इस्तेमाल करें जो हमेशा latest state की गारंटी देता है:

//  सही तरीका
setCount(prevCount => prevCount + 1);
setCount(prevCount => prevCount + 1);

---

Performance Optimization: Props और State को हैंडल करने के Best Practices

अगर आप चाहते हैं कि आपका React app मक्खन की तरह चले, तो इन बेस्ट प्रैक्टिसेज को कभी न भूलें:

• Keep State Local: जब तक जरूरी न हो, स्टेट को ग्लोबल लेवल पर न ले जाएं (Lift State Up सिर्फ तभी करें जब सचमुच दो भाई-बहनों वाले components को आपस में डेटा शेयर करना हो)।
• Prevent Unnecessary Re-renders: यदि आपके props बार-बार बदल नहीं रहे हैं, तो बड़े child components को React.memo() में रैप करें। यह फालतू के re-render को रोक देता है। अधिक जानकारी के लिए आप official React documentation को रेफर कर सकते हैं।
• Use Destructuring: अपने component की शुरुआत में ही props को destructure कर लें। इससे आपका कोड साफ और पढ़ने में आसान बनता है।
• Avoid Prop Drilling: अगर आपको 5 लेयर्स गहरे नीचे किसी component को डेटा भेजना है, तो "Prop Drilling" से बचें। इसके लिए React Context API या Redux जैसी State Management लाइब्रेरीज का इस्तेमाल करें।

---

Toh dosto, humne aaj seekha...

आज के इस व्यापक ट्यूटोरियल में हमने देखा कि React में डेटा हैंडलिंग के दो सबसे मुख्य स्तंभ कौन से हैं। **Props** जहाँ हमारे components को लचीला और बहुउपयोगी (reusable) बनाते हैं, वहीं **State** हमारे components में जान फूंकती है और उन्हें यूजर के साथ इंटरैक्टिव बनाती है। सीधे शब्दों में कहें तो, Props बाहर से मिलने वाली 'जानकारी' हैं, और State हमारी खुद की 'याददाश्त' है। जब आप इन दोनों का संतुलन बनाना सीख जाते हैं, तो आप एक बेहतरीन React डेवलपर बन जाते हैं। इस कॉन्सेप्ट को और पुख्ता करने के लिए, ऊपर दिए गए शॉपिंग कार्ट वाले कोड को अपने लोकल सिस्टम पर चलाकर जरूर देखें और खुद से बदलाव करने की कोशिश करें! ---