స్టేట్ను ఎత్తుకెళ్లడం అంటే చిన్న భాగం నుండి స్టేట్ని సాధారణ పేరెంట్కు తరలించడం, తద్వారా బహుళ చిన్న భాగాలు ఒకే డేటాను షేర్ చేసుకుంటాయి మరియు సింక్లో ఉంటాయి. సోదరీయ భాగాలను సమన్వయం చేయాల్సిన సమయంలో ఇది ప్రామాణిక పరిష్కారం.
() { [temp, setTemp] = (); ... }
దాని స్వంత సంబంధిత స్టేట్ కాపీని ప్రతిটి సోదరీయ భాగం కలిగిఉంటే, అవి సంబంధితంగా ఉండటానికి ఎటువంటి మార్గం లేదు — ఒకటిని మార్చడం మరొకటిని ప్రభావితం చేయదు.
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 గా పంపుతుంది, తద్వారా చిన్న భాగాలు మార్పులను అభ్యర్థించవచ్చు (ఆపై). ఇప్పుడు రెండు ఇన్పుట్ ఫీల్డ్లు ఒకే మూలాన్ని ప్రతిబింబిస్తాయి — ఒకటిని సవరించడం రెండింటినీ నవీకరించుతుంది.
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)
ఇది నిల్చుకు "డేటా, ఈవెంట్లు ఆపై" ప్రవాహం, స్టేట్ను భాగస్వామ్యం చేయడానికి అన్వయించినది.
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 కు సమయం) — భాగం స్టేట్ను బాగా రూపొందించడానికి ప్రధానమైనది.