ਜਦੋਂ ਦੋ components ਨੂੰ ਇੱਕੋ state ਸਾਂਝਾ ਕਰਨੀ ਪਏ, ਤੁਸੀਂ ਉਸ state ਨੂੰ ("lift") ਉਨ੍ਹਾਂ ਦੇ ਸਭ ਤੋਂ ਨਜ਼ਦੀਕੀ ਸਾਂਝੇ ਮਾਤਾ-ਪਿਤਾ ਤੱਕ ਭੇਜਦੇ ਹੋ ਅਤੇ ਇਸਨੂੰ props ਰਾਹੀਂ ਹੇਠਾਂ ਭੇਜਦੇ ਹੋ, ਤਾਂ ਜੋ ਸੱਚ ਦਾ ਇੱਕੋ ਸਰੋਤ ਹੋਵੇ।
() {
[query, setQuery] = ();
(
);
}
ਜੇਕਰ ਹਰੇਕ child ਆਪਣਾ query ਰੱਖਦਾ, ਤਾਂ ਉਹ ਵੱਖ ਹੋ ਜਾਂਦੇ ਸਨ। ਇਸਨੂੰ lift ਕਰਨ ਦਾ ਮਤਲਬ ਹੈ ਕਿ input ਅਤੇ ਨਤੀਜੇ ਹਮੇਸ਼ਾ ਸਹਿਮਤ ਹੁੰਦੇ ਹਨ।
State ਨੂੰ ਉੱਚਾ ਲਿਫ਼ਟ ਕਰਨਾ ਤੁਹਾਨੂੰ ਬਹੁਤ ਸਾਰੇ ਵਿਚਕਾਰਲੇ components ਰਾਹੀਂ props ਭੇਜਣਨ ਲਈ ਮਜਬੂਰ ਕਰ ਸਕਦਾ ਹੈ ਜੋ ਉਨ੍ਹਾਂ ਨੂੰ ਵਰਤਦੇ ਹੀ ਨਹੀਂ:
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
children ਵਜੋਂ ਭੇਜੋ ਤਾਂ ਜੋ ਡਾਟਾ ਉੱਥੇ ਰਹੇ ਜਿੱਥੇ ਇਹ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।ਗਾਇਡਿੰਗ ਸਿਧਾਂਤ: state ਨੂੰ ਉਤਨਾ ਉੱਚਾ lift ਕਰੋ ਜਿਤਨਾ ਇਸਨੂੰ ਜਾਣਾ ਪਏ – ਹੋਰ ਵੀ ਉੱਚਾ ਨਹੀਂ। ਉਵਰ-lifting ਵਿਖੇ re-renders ਅਤੇ prop drilling ਦਾ ਕਾਰਨ ਬਣਦਾ ਹੈ; under-lifting out-of-sync duplicates ਦਾ ਕਾਰਨ ਬਣਦਾ ਹੈ।