- بواسطة x32x01 ||
Conditional Rendering في React ببساطة هو التحكم في ظهور أو إخفاء Components على حسب حالات معينة. يعني تقدر تعرض Component أو تخفيه بناءً على حالة زي لو المستخدم سجل دخوله أو لأ.
ليه نستخدم Conditional Rendering؟
طرق استخدام Conditional Rendering
1. باستخدام if:
تقدر تستخدم جملة if العادية في JavaScript لتحديد إيه اللي هيتعرض.
مثال: عرض رسالة ترحيب لو المستخدم مسجل دخول فقط.
2. باستخدام Ternary Operator ?:
طريقة أسرع وأبسط، مناسبة للحالات اللي فيها اختيارين فقط (عرض أو عدم عرض).
3. باستخدام &&:
مناسبة لما يكون عندك حالة واحدة، لو اتحققت هيتعرض المكون، ولو محصلش مش هيتعرض.
أمثلة عملية على Conditional Rendering
نصائح عملية لاستخدام Conditional Rendering
ليه نستخدم Conditional Rendering؟ 
- تخصيص العرض للمستخدم: تظهر له الحاجات اللي تهمه بس بدل ما تعرض كل Components مرة واحدة.
- تحسين أداء التطبيق: إخفاء Components غير الضرورية يقلل استهلاك الموارد ويحافظ على سرعة التطبيق.
- تغيير شكل التطبيق ديناميكيًا: تخلي الواجهة تتغير حسب تفاعل المستخدم، زي الضغط على زرار أو اختيار من قائمة.
طرق استخدام Conditional Rendering 
1. باستخدام if:
تقدر تستخدم جملة if العادية في JavaScript لتحديد إيه اللي هيتعرض.
مثال: عرض رسالة ترحيب لو المستخدم مسجل دخول فقط.
2. باستخدام Ternary Operator ?:
طريقة أسرع وأبسط، مناسبة للحالات اللي فيها اختيارين فقط (عرض أو عدم عرض).
3. باستخدام &&:
مناسبة لما يكون عندك حالة واحدة، لو اتحققت هيتعرض المكون، ولو محصلش مش هيتعرض.
أمثلة عملية على Conditional Rendering 
- تغيير الواجهة حسب حالة المستخدم: عرض مكون تسجيل الدخول أو لوحة التحكم.
- إظهار أو إخفاء عناصر القوائم حسب الصلاحيات.
- التحكم في التحميل: عرض Loading Spinner لحد ما البيانات تجيب من السيرفر.
نصائح عملية لاستخدام Conditional Rendering 
- متزودش استخدام Conditional Rendering عن اللزوم عشان متأثرش على أداء التطبيق.
- لو الحالة بسيطة استخدم Ternary Operator، ولو الحالات معقدة استخدم if.
- خلي الكود واضح وسهل الفهم، وتجنب تعقيد الـConditions.
التعديل الأخير: