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

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

هو نمط يتم فيه تمرير دالة كـ prop (أو كـ children) للمكون، ويقوم المكون باستدعائها وتزويدها ببياناته الداخلية للتحكم في كيفية تصيير المخرجات.

الشرح

كان هذا النمط وسيلة شائعة لمشاركة السلوك (مثل تتبع حركة الفأرة أو التحقق من التمرير) قبل ظهور الهوكس. على الرغم من أن الـ Custom Hooks غطت معظم حالاته، إلا أن Render Props لا تزال تستخدم بكفاءة في المكونات الافتراضية (Virtualizers) ومكتبات الرسوم البيانية لتخصيص رسم العناصر الفردية.

مثال بالكود

interface MouseTrackerProps {
  render: (mouse: { x: number; y: number }) => React.ReactNode;
}

function MouseTracker({ render }: MouseTrackerProps) {
  const [pos, setPos] = useState({ x: 0, y: 0 });

  return (
    <div onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })}>
      {render(pos)}
    </div>
  );
}

أخطاء شائعة

• تمرير دوال مجهولة مباشرة في كل render مما قد يمنع استفادة المكونات الفرعية من React.memo.

أسئلة متابعة

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

المصادر

• React legacy docs — Render Props