المقدمة

عند استخدام React ، تعد إدارة البيانات بين الـ Components أمرًا أساسيًا. واحدة من التحديات الشائعة التي يواجهها المطورون هي كيفية التعامل مع  الـ props عند الحاجة إلى تمرير objects كبيرة تحتوي على بيانات متعددة.

في هذا المقال، نستعرض أفضل الممارسات للتعامل مع هذا السيناريو مع تسليط الضوء على مزايا وعيوب كل أسلوب.

تمرير الـ object بالكامل

في هذه الطريقة، يتم تمرير الـ object بالكامل كـ prop. داخل الـ  UserProfile Component ، يمكن الوصول إلى الحقول المطلوبة (مثل user.name أو user.avatar) حسب الحاجة.

<UserProfile user={user}/>;

المزايا  

• سهولة وسرعة التنفيذ: تمرير الـ object بالكامل بسيط ولا يتطلب تعديلات إضافية على الكود.
• مرونة مستقبلية: إذا احتاج الـ component إلى المزيد من الحقول لاحقًا، فإنها تكون متاحة بالفعل.

العيوب

• أداء أقل: تمرير object كبير قد يؤدي إلى حدوث (re-rendering) بشكل غير ضروري إذا تغير أي جزء  من  الـ object، حتى وإن لم يكن مرتبطًا بالـ component.
• زيادة البيانات المرسلة: قد يتم تمرير بيانات غير ضرورية للـ component، مما يستهلك ذاكرة إضافية.
• ترابط قوي بين ال components: يصبح  الـ Component معتمدًا بشكل مباشر على بنية الـ  object، مما يجعل إعادة الهيكلة أكثر تعقيدًا.

تمرير الحقول المطلوبة فقط

في هذه الطريقة، يتم استخلاص الحقول المطلوبة فقط من الـ object وتمريرها كـ props منفصلة.

<UserProfile name={user.name} avatar={user.avatar} />;

المزايا

• أداء أفضل: يقلل من احتمالية حدوث (re-rendering) غير الضرورية لأن React تقوم بمقارنة الحقول الفردية بكفاءة أعلى من مقارنة الـ objects.
• تقليل حجم البيانات: يتم تمرير البيانات المطلوبة فقط، مما يحسن من استخدام الموارد.
• تقليل الترابط: يصبح  الـ Component أكثر استقلالية عن بنية الـ object، مما يسهل إعادة هيكلة الكود لاحقًا.

العيوب

• مزيد من العمل اليدوي: إذا كان هناك عدد كبير من الحقول، فقد يكون من المرهق تمرير كل حقل يدويًا.
• تعديلات مستقبلية: إذا احتاج  الـ Component إلى حقول جديدة، يجب تحديث الكود في الـ Parent Component لتمريرها.

مقارنة الأداء بين الطريقتين

export const App = () => {
  const user = { id: 1, name: "Ahmed", avatar: "avatar.png", email: "ahmed@example.com" };

  return (
    <>
      {/* إذا تغير الـ email سوف يحدث re-rendering غير ضرورية */}
      <UserProfile user={user} />
      {/* سيحدث re-rendering فقط في حالة تغير الـ name أو الـ avatar */}
      <UserProfile name={user.name} avatar={user.avatar} />
    </>
  );
};

في المثال أعلاه، إذا تغير حقل الـ email، فإن الطريقة الأولى ستؤدي إلى حدوث re-rendering غير ضرورية للـ UserProfile لأن الـ user object تم تغييره كمرجع جديد.  

أما في الطريقة الثانية، فإن React تقوم بعمل re-rendering فقط إذا تغير أحد الحقول التي تم تمريرها (name أو avatar)،  مما يحسن من الأداء.

متى يمكن تمرير الـ object بالكامل؟

على الرغم من أن تمرير الحقول المحددة يعد الأفضل من حيث الأداء، إلا أن تمرير الـ object بالكامل قد يكون مناسبًا في الحالات التالية:

• عدد كبير من الحقول المطلوبة: عندما تكون الحقول المطلوبة كثيرة جدًا، يصبح من العملي تمرير الـ object كاملًا بدلاً من استخلاص كل حقل يدويًا.
• ثبات الـ object : إذا كنت تعلم أن الـ object لن يتغير بشكل متكرر، فإن التأثير على الأداء سيكون محدودًا.
• سهولة التطوير: عند الحاجة إلى تطوير سريع أو عندما تكون الأولوية للبساطة.

الخلاصة

• للأداء الأفضل: استخدم الطريقة الثانية وقم بتمرير الحقول المطلوبة فقط.
• الراحة والمرونة: يمكن تمرير الـ object بالكامل إذا كنت بحاجة لعدد كبير من الحقول أو إذا كنت ترغب في تسهيل صيانة الكود.

في الختام

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