ماذا يعني رفع الحالة لأعلى (Lifting State Up)؟

رفع الحالة لأعلى يعني نقل الحالة من مكون فرعي إلى مكون أب مشترك حتى يتمكن عدة مكونات فرعية من مشاركة والبقاء في تزامن مع نفس البيانات. إنه الحل القياسي عندما تحتاج المكونات الشقيقة إلى التنسيق.

المشكلة: المكونات الشقيقة تحتاج إلى بيانات مشتركة

// ❌ each child has its OWN state — they can't sync
function TempInput() { const [temp, setTemp] = useState(0); ... }
// Two sibling TempInputs (Celsius & Fahrenheit) can't see each other's value

إذا احتفظ كل مكون من المكونات الشقيقة برسختها الخاصة من الحالة ذات الصلة، فلا توجد طريقة للحفاظ على اتساقها — تغيير أحدها لا يؤثر على الآخر.

الحل: رفع الحالة إلى المكون الأب

function Calculator() {
  const [temperature, setTemperature] = useState(0); // state LIFTED to the parent

  return (
    <>
      {/* pass state DOWN as a prop, and a setter to update it */}
      <TempInput scale="C" value={temperature} onChange={setTemperature} />
      <TempInput scale="F" value={temperature} onChange={setTemperature} />
      <p>Both inputs share one value: {temperature}</p>
    </>
  );
}

function TempInput({ value, onChange }) {
  return <input value={value} onChange={e => onChange(e.target.value)} />;
}

الحالة المشتركة تعيش الآن في المكون الأب (Calculator). يمررها لأسفل كـ prop وكـ setter حتى يتمكن المكونات الفرعية من طلب التغييرات (لأعلى). الآن يعكس كلا الإدخالين نفس المصدر — تحرير أحدهما يحدّث كليهما.

النمط

1. Find the closest COMMON ancestor of the components that need to share
2. Move the state UP into that ancestor
3. Pass the value DOWN as props
4. Pass a callback DOWN so children can request updates (data up via events)

هذا هو نفس التدفق "البيانات لأسفل، الأحداث لأعلى"، المطبق لجعل الحالة مشتركة.

عندما يصبح الرفع مرهقاً

Lifting too high (state ends up far from where it's used) → prop drilling.
At that point, prefer Context or a state library instead of lifting further.

لماذا يهمك ذلك

رفع الحالة لأعلى هو التقنية الأساسية لـ مشاركة الحالة بين المكونات الشقيقة/ذات الصلة في الأطر القائمة على المكونات — فهو يحافظ على مصدر واحد موثوق في مكون أب مشترك حتى تبقى المكونات الفرعية في تزامن.

غالباً ما تكون الأداة الأولى التي يجب اللجوء إليها قبل إضافة Context أو store.

التعرف على متى يجب الرفع (المكونات الشقيقة تحتاج إلى التنسيق) — ومتى يصبح الرفع مفرطاً (مما يسبب prop drilling، لذا حان الوقت لـ Context/store) — يعتبر أساسياً لهيكلة حالة المكونات بشكل جيد.