عندما تحتاج مكونان إلى مشاركة نفس الحالة، تقوم بنقل ("رفع") تلك الحالة إلى أقرب سلف مشترك لهما وتمريرها لأسفل عبر props، بحيث تكون هناك مصدر واحد للحقيقة.
jsx
() {
[query, setQuery] = ();
(
);
}
عندما تحتاج مكونان إلى مشاركة نفس الحالة، تقوم بنقل ("رفع") تلك الحالة إلى أقرب سلف مشترك لهما وتمريرها لأسفل عبر props، بحيث تكون هناك مصدر واحد للحقيقة.
() {
[query, setQuery] = ();
(
);
}
إذا احتفظت كل مكون فرعي بـ query خاصة به، فستصبح غير متزامنة. رفعها يعني أن الإدخال والنتائج تتفق دائماً.
رفع الحالة عالياً قد يجبرك على تمرير props عبر العديد من المكونات الوسيطة التي لا تستخدمها:
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
children بحيث تبقى البيانات حيث يتم استخدامها بدلاً من تمريرها عبر الكثير.المبدأ الموجه: ارفع الحالة فقط إلى المستوى الذي تحتاجه — لا أعلى من ذلك. الرفع الزائد يسبب إعادة تصيير واسعة و prop drilling؛ الرفع الناقص يسبب نسخ مكررة غير متزامنة.