लिफ्टिङ स्टेट अप भन्ने कुरा के हो?

Question

Accepted Answer

**लिफ्टिङ स्टेट अप** भन्ने कुरा स्टेटलाई बाल कम्पोनेन्टबाट **साझा अभिभावक** मा सार्नु हो ताकि धेरै बाल कम्पोनेन्टहरूले एकै डेटासँग साझेदारी गर्न र समन्वय राख्न सक्न। यो मानक समाधान हो जब भाइ-बहिनी कम्पोनेन्टहरूलाई समन्वय गर्न आवश्यक हुन्छ। ## समस्या: भाइ-बहिनीहरूलाई साझा डेटा चाहिन्छ ```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 ``` यदि दुई भाइ-बहिनी कम्पोनेन्टहरूले प्रत्येकले आफ्नो सम्बन्धित स्टेटको प्रतिलिपि राखे भने, तिनीहरू सँग अनुरूप रहन कुनै तरिका छैन — एकलाई परिवर्तन गर्नुले अर्कोलाई असर गरेन। ## समाधान: स्टेटलाई अभिभावक मा लिफ्ट गर्नुहोस् ```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 पास गर्छ ताकि बाल कम्पोनेन्टहरूले परिवर्तनको अनुरोध गर्न सक्न (*माथि*)। अब दुवै इनपुटले एकै स्रोत प्रतिबिम्बित गर्छ — एकलाई सम्पादन गर्नुले दुवै अपडेट गर्छ। ## प्याटर्न ```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) ``` यो एकै "डेटा तल, घटनाहरू माथि" प्रवाह हो, स्टेट साझा गर्नको लागि लागू गरिएको। ## जब लिफ्टिङ धेरै हुन्छ ```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. ``` ## किन यो महत्त्वपूर्ण छ लिफ्टिङ स्टेट अप भन्ने कुरा **भाइ-बहिनी/सम्बन्धित कम्पोनेन्टहरू बीच स्टेट साझा गर्नु** को मौलिक प्रविधि हो कम्पोनेन्ट-आधारित फ्रेमवर्कमा — यसले साझा अभिभावकमा सत्यको एकल स्रोत राख्छ ताकि बाल कम्पोनेन्टहरू समन्वयमा रहन्छन्। यो Context वा store थप गर्नु अघि पहुँच गर्नको लागि अक्सर *पहिलो* उपकरण हो। कहिले लिफ्ट गर्ने (भाइ-बहिनीहरूलाई समन्वय गर्न आवश्यक छ) — र कहिले लिफ्टिङ गएको छ (prop drilling को कारण, ताकि यो Context/store को समय हो) — भनेर पहिचान गर्नु कम्पोनेन्ट स्टेट राम्रोसँग संरचना गर्नको लागि मुख्य कुरा हो।