ਲਿਫਟਿੰਗ ਸਟੇਟ ਅੱਪ ਦਾ ਕੀ ਮਤਲਬ ਹੈ?

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`) ਵਿੱਚ ਰਹਿਂਦੀ ਹੈ। ਇਹ ਮੁੱਲ ਨੂੰ *ਹੇਠਾਂ* ਪ੍ਰੌਪ ਦੇ ਤੌਰ ਤੇ ਅਤੇ ਇੱਕ ਸੈਟਰ ਦੇ ਨਾਲ ਪਾਸ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਚਾਈਲਡ ਕੰਪੋਨੈਂਟ ਤਬਦੀਲੀਆਂ ਮੰਗ ਸਕਣ (*ਉਪਰ*)। ਹੁਣ ਦੋਨੋਂ ਇਨਪੁਟ ਇਕੋ ਸਰੋਤ ਨੂੰ ਪ੍ਰਤੀਬਿੰਬਿਤ ਕਰਦੇ ਹਨ — ਇੱਕ ਨੂੰ ਸੰਪਾਦਿਤ ਕਰਨਾ ਦੋਨੋਂ ਨੂੰ ਅਪਡੇਟ ਕਰਦਾ ਹੈ। ## ਪੈਟਰਨ ```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 ਜਾਂ ਸਟੋਰ ਸ਼ਾਮਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਪਹੁੰਚ ਕਰਨ ਵਾਲਾ *ਪਹਿਲਾ* ਸੰਦ ਹੁੰਦਾ ਹੈ। ਪਛਾਣਨਾ ਕਿ ਕਦੋਂ ਲਿਫਟ ਕਰਨਾ ਹੈ (ਭਾਈ-ਭੈਣਸ ਨੂੰ ਤਾਲਮੇਲ ਕਰਨਾ ਪੈਂਦਾ ਹੈ) — ਅਤੇ ਕਦੋਂ ਲਿਫਟਿੰਗ ਬਹੁਤ ਦੂਰ ਚਲੀ ਗਈ ਹੈ (ਪ੍ਰੌਪ ਡ੍ਰਿਲਿੰਗ ਦੇ ਕਾਰਨ, ਇਸਲਈ ਇਹ Context/ਸਟੋਰ ਦਾ ਸਮਾਂ ਹੈ) — ਕੰਪੋਨੈਂਟ ਸਟੇਟ ਨੂੰ ਚੰਗੀ ਤਰਾਂ ਲਮਬੀ ਕਰਨ ਦੀ ਜੜ੍ਹ ਹੈ।