ما الفرق بين Higher-Order Components (HOC) و Custom Hooks ولماذا حلت الهوكس محل الـ HOCs؟

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

الـ HOC هي دالة تستقبل مكوناً وتعيد مكوناً جديداً مغلفاً، بينما Custom Hooks هي دوال تشارك منطق الحالة فقط دون التلاعب بشجرة الـ DOM وتجنب التعشيش المفرط (Wrapper Hell).

الشرح

كانت الـ HOCs شائعة جداً لمشاركة المنطق (مثل withAuth أو withRouter). عيوبها شملت: تعارض أسماء الـ Props، صعوبة تتبع مصدر كل prop في TypeScript، ونشوء "Wrapper Hell" في شجرة المكونات. وفرت الـ Custom Hooks نفس القدرة على إعادة استخدام المنطق بصيغة أنظف وأكثر مرونة وبدون أي تأثير سلبي على هيكل شجرة المكونات.

مثال بالكود

// النمط القديم: Higher-Order Component
// const ProtectedProfile = withAuth(ProfileComponent);

// النمط الحديث: Custom Hook مباشر داخل المكون
function ProfilePage() {
  const { user, isAuthenticated } = useAuth();
  if (!isAuthenticated) return <LoginPrompt />;
  return <h1>أهلاً، {user.name}</h1>;
}

أخطاء شائعة

• استخدام HOC داخل جسم دالة المكون أثناء الـ render مما يؤدي لإعادة إنشاء نوع المكون في كل دورة وضياع حالته.

أسئلة متابعة

• ما هو نمط Render Props وما هي استخداماته المعاصرة؟

المصادر

• React docs — Reusing Logic with Custom Hooks
• React legacy docs — Higher-Order Components