जब दो घटक एक ही state साझा करने की आवश्यकता होती है, तो आप उस state को उनके निकटतम सामान्य पूर्वज तक "उठाते" हैं और इसे props के माध्यम से नीचे pass करते हैं, ताकि सत्य का एक एकल स्रोत हो।
jsx
() {
[query, setQuery] = ();
(
);
}
जब दो घटक एक ही state साझा करने की आवश्यकता होती है, तो आप उस state को उनके निकटतम सामान्य पूर्वज तक "उठाते" हैं और इसे props के माध्यम से नीचे pass करते हैं, ताकि सत्य का एक एकल स्रोत हो।
() {
[query, setQuery] = ();
(
);
}
अगर प्रत्येक child अपना query रखता, तो वे sync से बाहर हो जाते। State को उठाना मतलब है कि input और results हमेशा सहमत हों।
State को ऊपर उठाने से आप को कई intermediate घटकों के माध्यम से props pass करने के लिए मजबूर किया जा सकता है जो उनका उपयोग नहीं करते:
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
children के रूप में pass करें ताकि डेटा जहां इसका उपयोग किया जाता है वहां रहे, thread के बजाय।मार्गदर्शक सिद्धांत: state को केवल उतना ही ऊपर उठाएं जितना आवश्यक है — अधिक नहीं। अत्यधिक उठाने से व्यापक re-renders और prop drilling होती है; कम उठाने से sync से बाहर के duplicates होते हैं।