ما هو مبدأ الـ Lifting State Up ومتى نلجأ إليه؟

الإجابة المختصرة

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

الشرح

عندما يحتاج مكونان شقيقان للوصول لنفس البيانات أو تعديلها معاً، بدلاً من تكرار الحالة أو محاولة مزامنة حالتين محليتين، يتم رفع الحالة إلى المكون الأب المشترك وتمرير القيمة الحالية ودالة التحديث عبر الـ props.

مثال بالكود

// رفع حالة الفلتر للأب المشترك
function FilterableList() {
  const [filter, setFilter] = useState('');

  return (
    <div>
      <SearchBar filter={filter} onFilterChange={setFilter} />
      <ProductList filter={filter} />
    </div>
  );
}

أخطاء شائعة

• الاحتفاظ بنسخة مكررة من الحالة في كل من الأب والابن ومحاولة مزامنتها داخل useEffect.

أسئلة متابعة

• ما هي الـ Error Boundaries وكيف تتعامل مع الأخطاء غير المتوقعة في شجرة المكونات؟

المصادر

• React docs — Sharing State Between Components