যখন দুটি উপাদানকে একই state শেয়ার করতে হয়, আপনি সেই state কে তাদের নিকটতম সাধারণ পূর্বপুরুষের কাছে নিয়ে যান ("উত্থাপন") এবং এটিকে props এর মাধ্যমে নিচের দিকে পাঠান, যাতে একটি একক source of truth থাকে।
() {
[query, setQuery] = ();
(
);
}
যদি প্রতিটি child তার নিজস্ব query রাখত, তবে তারা সিঙ্ক হারিয়ে যেত। এটি উত্থাপন করা মানে input এবং results সবসময় একমত।
State উচ্চে উত্থাপন করা আপনাকে অনেক মধ্যবর্তী উপাদানের মাধ্যমে props পাঠাতে বাধ্য করতে পারে যারা সেগুলি ব্যবহার করে না:
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
children হিসাবে পাঠান যাতে ডেটা যেখানে ব্যবহার করা হয় সেখানে থাকে বরং অনেক উপাদানের মাধ্যমে পাঠানো না হয়।নির্দেশনামূলক নীতি: state শুধুমাত্র যতটা উচ্চে উত্থাপন করুন যতটা প্রয়োজন — এর চেয়ে বেশি নয়। অত্যধিক উত্থাপন ব্যাপক পুনরায় রেন্ডার এবং prop drilling সৃষ্টি করে; অপর্যাপ্ত উত্থাপন অসিঙ্ক্রোনাইজড duplicates তৈরি করে।