రెండు కాంపోనెంట్లు ఒకే state ను పంచుకోవలసి ఉంటే, ఆ state ను వాటి సమీప సాధారణ ancestor కు తరలించి ("ఎత్తుకెళ్లి") props ద్వారా క్రిందికి పాస్ చేస్తారు, తద్వారా సత్యం యొక్క ఒకే మూలం ఉంటుంది.
jsx
() {
[query, setQuery] = ();
(
);
}
రెండు కాంపోనెంట్లు ఒకే state ను పంచుకోవలసి ఉంటే, ఆ state ను వాటి సమీప సాధారణ ancestor కు తరలించి ("ఎత్తుకెళ్లి") props ద్వారా క్రిందికి పాస్ చేస్తారు, తద్వారా సత్యం యొక్క ఒకే మూలం ఉంటుంది.
() {
[query, setQuery] = ();
(
);
}
ప్రతి child తన స్వంత query ను ఉంచుకుంటే, అవి సమకాలీకరణ నుండి బయటపడతాయి. దీన్ని ఎత్తుకెళ్లడం అంటే ఇన్పుట్ మరియు ఫలితాలు ఎప్పుడూ అంగీకరిస్తాయి.
State ను ఎక్కువ ఎత్తుకెళ్లడం వలన అనేక మధ్యస్థ కాంపోనెంట్ల ద్వారా props ను పాస్ చేయవలసి ఉంటుంది, అవి వాటిని ఉపయోగించవు:
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
children గా పాస్ చేయండి, తద్వారా డేటా దానిని ఉపయోగించే చోట ఉంటుంది, బదులు బహుశా thread చేయబడుతుంది.గైడింగ్ సూత్రం: state ను ఉండాల్సిన వరకు మాత్రమే ఎత్తుకెళ్లండి — ఎక్కువ కాదు. ఎక్కువ ఎత్తుకెళ్లడం వలన విస్తృత re-renders మరియు prop drilling వస్తుంది; తక్కువ ఎత్తుకెళ్లడం వలన సమకాలీకరణకు వెలుపలి నకલులు వస్తాయి.