state کو اوپر lift کرنے کا کیا مطلب ہے؟

Question

Accepted Answer

**State کو اوپر lift کرنا** کا مطلب ہے state کو child component سے ہٹا کر **common parent** میں منتقل کرنا تاکہ متعدد children ایک ہی data کو share کر سکیں اور آپس میں synchronized رہیں۔ یہ معیاری حل ہے جب sibling components کو coordinate کرنے کی ضرورت ہو۔ ## مسئلہ: siblings کو shared data درکار ہے ```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 components میں سے ہر ایک کے پاس اپنی الگ copy ہے related state کی، تو انہیں consistent رکھنے کا کوئی طریقہ نہیں — ایک میں تبدیلی دوسرے کو متاثر نہیں کرتی۔ ## حل: state کو parent میں منتقل کریں ```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)} />; } ``` Shared state اب parent (`Calculator`) میں رہتا ہے۔ یہ value کو prop کے طور پر *نیچے* بھیجتا ہے اور ایک setter دیتا ہے تاکہ children تبدیلیوں کی درخواست کر سکیں (*اوپر*)۔ اب دونوں 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) ``` yہ وہی "data down, events up" flow ہے، state کو shared بنانے کے لیے لاگو کیا گیا۔ ## جب lifting بہت زیادہ ہو جائے ```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. ``` ## یہ اہم کیوں ہے State کو اوپر lift کرنا **sibling/related components کے درمیان state شیئر کرنے** کی بنیادی تکنیک ہے component-based frameworks میں — یہ common parent میں ایک واحد source of truth رکھتا ہے تاکہ children آپس میں synchronized رہیں۔ یہ اکثر Context یا store شامل کرنے سے پہلے پہلی tool ہے جس کا استعمال کریں۔ یہ پہچاننا کہ کب lift کریں (siblings کو coordinate کرنا ہے) — اور کب lifting بہت آگے بڑھ گئی ہے (prop drilling کا سبب بن رہی ہے، تو Context/store کا وقت آ گیا) — component state کو اچھی طریقے سے structure کرنے کے لیے بنیادی ہے۔