state lifting করা মানে কী?

Question

Accepted Answer

**State lifting** মানে হল state একটি child component থেকে একটি **সাধারণ parent** এ নিয়ে যাওয়া যাতে একাধিক children একই data share করতে এবং sync থাকতে পারে। এটি সেই সময়ের মান সমাধান যখন sibling components সমন্বয় করতে হয়। ## সমস্যা: 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 component এর প্রতিটিতে related state এর নিজস্ব কপি থাকে, তাহলে তাদের consistent থাকার কোন উপায় নেই — একটি পরিবর্তন করা অপরটিকে প্রভাবিত করে না। ## সমাধান: state কে parent এ lift করুন ```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 changes অনুরোধ করতে পারে (*উপরে*)। এখন উভয় inputs একই source প্রতিফলিত করে — একটি 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 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. ``` ## এটি কেন গুরুত্বপূর্ণ Lifting state up হল **sibling/related components এর মধ্যে state share করার** মূল technique component-based frameworks এ — এটি একটি common parent এ single source of truth রাখে যাতে children sync থাকে। Context বা একটি store যোগ করার আগে এটি প্রায়ই *প্রথম* tool যা ব্যবহার করতে হয়। কখন lift করতে হবে তা স্বীকৃতি দেওয়া (siblings কে সমন্বয় করতে হবে) — এবং কখন lifting খুব বেশি হয়েছে (prop drilling ঘটাচ্ছে, তাই Context/একটি store এর সময়) — এটি component state ভালভাবে structure করার জন্য মূল।