स्टेट को ऊपर उठाना का मतलब है कि स्टेट को चाइल्ड कंपोनेंट से कॉमन पेरेंट तक ले जाना ताकि कई चाइल्ड्रन एक ही डेटा को शेयर कर सकें और सिंक में रह सकें। यह मानक समाधान है जब sibling कंपोनेंट्स को समन्वय की जरूरत होती है।
() { [temp, setTemp] = (); ... }
अगर दो sibling कंपोनेंट्स के पास संबंधित स्टेट की अपनी-अपनी कॉपी हो, तो उन्हें सिंक रखने का कोई तरीका नहीं है — एक को बदलना दूसरे को प्रभावित नहीं करेगा।
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 */}
<TempInput scale="C" value={temperature} onChange={setTemperature} />
<TempInput scale="F" value={temperature} onChange={setTemperature} />
<p>Both inputs share one value: {temperature}</p>
</>
);
}
function TempInput({ value, onChange }) {
return <input value={value} onChange={e => onChange(e.target.value)} />;
}
शेयर किया गया स्टेट अब पेरेंट (Calculator) में रहता है। यह वैल्यू को नीचे prop के रूप में और एक setter के साथ पास करता है ताकि चाइल्ड्रन बदलाव के लिए (ऊपर) अनुरोध कर सकें। अब दोनों inputs एक ही source को reflect करते हैं — एक को edit करने से दोनों update होते हैं।
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 स्टेट बनाने के लिए लागू किया गया।
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 करने के लिए मूल है।
विस्तृत उत्तरों के साथ IT इंटरव्यू प्रश्नों की एक लाइब्रेरी — जूनियर से सीनियर तक।
दान करें