स्टेट उपर करणे म्हणजे काय?

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`) राहते. हे मूल्य *खाली* अनुपात म्हणून आणि 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 ची वेळ) — हे घटकाचा स्टेट चांगल्या प्रकारे संरचित करण्याचे मूलमंत्र आहे.