ما هو مفهوم الـ Pure Components و Purity في دوال ريأكت (Pure Functions)؟

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

الدالة أو المكون النقي هو الذي ينتج دائماً نفس المخرجات لنفس المدخلات (Props) دون إحداث أي آثار جانبية (Side Effects) خارج نطاقه أثناء الـ Render.

الشرح

في ريأكت، يجب أن تكون مرحلة التصيير (Render Phase) خالية من الآثار الجانبية. لا يجوز لمكون أثناء تنفيذه أن يغير متغيرات عامة سابقة، أو يرسل طلبات HTTP، أو يعدل DOM مباشرة. الآثار الجانبية يجب أن تقع فقط داخل Event Handlers أو useEffect.

مثال بالكود

// مكون نقي: يعتمد فقط على الـ props
function Cup({ guest }: { guest: number }) {
  return <h2>كوب الشاي للضيف رقم #{guest}</h2>;
}

أخطاء شائعة

• تعديل مصفوفة أو كائن ممرر في الـ props مباشرة داخل جسم الدالة (Mutation).

أسئلة متابعة

• ما هو الـ StrictMode وما هي الفحوصات والتدقيقات التي يجريها في بيئة التطوير؟
• ما هو دور React Fiber وما الفرق بين Render Phase و Commit Phase؟

المصادر

• React docs — Keeping Components Pure