स्टेट को ऊपर उठाने का मतलब क्या है?

Question

Accepted Answer

**स्टेट को ऊपर उठाना** का मतलब है कि स्टेट को चाइल्ड कंपोनेंट से **कॉमन पेरेंट** तक ले जाना ताकि कई चाइल्ड्रन एक ही डेटा को शेयर कर सकें और सिंक में रह सकें। यह मानक समाधान है जब sibling कंपोनेंट्स को समन्वय की जरूरत होती है। ## समस्या: sibling को shared डेटा चाहिए ```jsx // ❌ each child has its OWN state — they can't sync function TempInput() { const [temp, setTemp] = useState(0); ... } // Two sibling TempInputs (Celsius & Fahrenheit) can't see each other's value ``` अगर दो sibling कंपोनेंट्स के पास संबंधित स्टेट की अपनी-अपनी कॉपी हो, तो उन्हें सिंक रखने का कोई तरीका नहीं है — एक को बदलना दूसरे को प्रभावित नहीं करेगा। ## समाधान: स्टेट को पेरेंट तक ऊपर उठाएं ```jsx function Calculator() { const [temperature, setTemperature] = useState(0); // state LIFTED to the parent return ( <> {/* pass state DOWN as a prop, and a setter to update it */}

Both inputs share one value: {temperature}

); } function TempInput({ value, onChange }) { return onChange(e.target.value)} />; } ``` शेयर किया गया स्टेट अब पेरेंट (`Calculator`) में रहता है। यह वैल्यू को *नीचे* prop के रूप में और एक setter के साथ पास करता है ताकि चाइल्ड्रन बदलाव के लिए (*ऊपर*) अनुरोध कर सकें। अब दोनों inputs एक ही source को reflect करते हैं — एक को edit करने से दोनों update होते हैं। ## पैटर्न ```text 1. Find the closest COMMON ancestor of the components that need to share 2. Move the state UP into that ancestor 3. Pass the value DOWN as props 4. Pass a callback DOWN so children can request updates (data up via events) ``` यह एक ही "data नीचे, events ऊपर" flow है, shared स्टेट बनाने के लिए लागू किया गया। ## जब ऊपर उठाना बहुत ज्यादा हो जाए ```text Lifting too high (state ends up far from where it's used) → prop drilling. At that point, prefer Context or a state library instead of lifting further. ``` ## क्यों यह महत्वपूर्ण है स्टेट को ऊपर उठाना **sibling/संबंधित कंपोनेंट्स के बीच स्टेट शेयर करने** का मौलिक तकनीक है component-based frameworks में — यह एक कॉमन पेरेंट में एक ही source of truth रखता है ताकि चाइल्ड्रन सिंक में रहें। यह अक्सर Context या store जोड़ने से पहले *पहला* tool है जिसे use करना चाहिए। यह पहचानना कि कब ऊपर उठाना है (siblings को समन्वय चाहिए) — और कब ऊपर उठाना बहुत ज्यादा हो गया है (prop drilling का कारण बनता है, इसलिए Context/store का समय है) — component state को अच्छी तरह से structure करने के लिए मूल है।