كيف ترتقي بكتابة الشروط في React بأساليب أنظف وأكثر احترافية

تُعد الشروط جزءاً أساسياً في أي تطبيق مبني باستخدام React، لأنها المسؤولة عن إظهار العناصر أو إخفائها، وعرض حالات التحميل، والتنبيه عند وجود أخطاء، وتحديد أي مكوّن يجب أن يظهر للمستخدم وفقاً للحالة الحالية للتطبيق. وإذا كنت ترغب في كتابة واجهات نظيفة وسهلة الصيانة، فإن إتقان الشروط ليس مهارة ثانوية، بل عنصر محوري في جودة الكود.

في هذا الدليل، سنستعرض أهم الأنماط العملية لكتابة الشروط داخل React بصورة مختصرة وواضحة، مع توضيح متى تستخدم كل أسلوب، وما الحالات التي يُفضّل تجنبها حتى يبقى الكود مقروءاً وقابلاً للتوسع.

1. استخدم جمل if كخيار أساسي عند الحاجة إلى الخروج المبكر

أبسط وأوضح أسلوب لكتابة الشروط في React هو الاعتماد على جملة if، خاصة عندما تريد إيقاف عرض المكوّن مبكراً أو إظهار مخرج مختلف تماماً قبل الوصول إلى واجهة JSX الأساسية.

لنفترض أنك تجلب قائمة مقالات من API، وفي البداية تكون قيمة posts غير معرّفة. هنا يمكنك التحقق منها مباشرة وإرجاع null إذا لم تصل البيانات بعد:

export default function App() {
  const { posts } = usePosts();
  // posts === undefined at first

  if (!posts) return null;

  return (
    <div>
      <PostList posts={posts} />
    </div>
  );
}

نجاح هذا النمط يعتمد على مبدأ early return، أي أنك تتعامل مع الحالة الاستثنائية أولاً، ثم تترك باقي المكوّن لعرض السيناريو الطبيعي. هذه الطريقة تجعل المنطق أوضح وتقلل من التداخل غير الضروري.

متى تكون if هي الخيار الأفضل؟

• عند التحقق من وجود البيانات قبل عرض الواجهة.
• عند التعامل مع حالات التحميل أو الخطأ.
• عندما يكون المطلوب عرض مكوّن مختلف بالكامل أو عدم عرض أي شيء.

ويمكنك تكرار أكثر من جملة if بدون الحاجة إلى else أو else if في كثير من الحالات:

export default function App() {
  const { isLoading, isError, posts } = usePosts();

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error!</div>;

  return (
    <div>
      <PostList posts={posts} />
    </div>
  );
}

هذا الأسلوب يمنحك كوداً مباشراً وسهل القراءة، ويجنبك تشعبات منطقية معقدة داخل نفس الكتلة.

2. استخدم العامل الثلاثي ternary داخل JSX عندما تحتاج إلى اختيار بين احتمالين

عندما تريد كتابة الشرط مباشرة داخل JSX، لا يمكنك استخدام جملة if لأن JSX يقبل التعابير expressions لا التعليمات statements. لهذا السبب يكون العامل الثلاثي condition ? value1 : value2 هو الخيار الشائع داخل الواجهة.

مثال نموذجي: إذا أردت عرض مكوّن مختلف على الشاشات الصغيرة مقارنة بالشاشات الكبيرة:

function App() {
  const isMobile = useWindowSize();

  return (
    <main>
      <Header />
      <Sidebar />
      {isMobile ? <MobileChat /> : <Chat />}
    </main>
  );
}

نصيحة مهمة لتقليل ازدحام JSX

كثير من المطورين يضعون جميع العوامل الثلاثية مباشرة داخل شجرة المكوّنات، لكن ذلك قد يجعل الواجهة مزدحمة بصرياً. الأفضل أحياناً أن تحفظ نتيجة الشرط في متغير، ثم تستخدمه لاحقاً داخل JSX:

function App() {
  const isMobile = useWindowSize();
  const ChatComponent = isMobile ? <MobileChat /> : <Chat />;

  return (
    <main>
      <Header />
      <Sidebar />
      {ChatComponent}
    </main>
  );
}

بهذه الطريقة تحتفظ بمرونة العامل الثلاثي، لكن مع واجهة أنظف وأسهل للمراجعة.

3. إذا لم تكن بحاجة إلى else فاستخدم العامل &&

في كثير من الأحيان، يكون المطلوب عرض عنصر معين فقط عندما يتحقق الشرط، وفي حال لم يتحقق لا تريد عرض أي شيء. بعض المطورين يستخدمون عاملاً ثلاثياً بالشكل التالي: condition ? <Component /> : null. هذا صحيح، لكنه ليس دائماً الأكثر أناقة.

إذا لم يكن لديك فرع بديل، فاستخدم العامل المنطقي &&:

export default function PostFeed() {
  const { posts, hasFinished } = usePosts();

  return (
    <>
      <PostList posts={posts} />
      {hasFinished && (
        <p>You have reached the end!</p>
      )}
    </>
  );
}

فوائد هذا الأسلوب

• أقصر من العامل الثلاثي عندما لا تحتاج إلى فرع بديل.
• واضح للمطورين الذين يقرؤون الكود بسرعة.
• مثالي للرسائل الصغيرة والتنبيهات والعناصر الثانوية.

لكن احذر من استخدام && مع قيم قد تُنتج سلوكاً غير مقصود مثل 0، لأن بعض القيم تُعرض فعلياً داخل الواجهة إذا لم يُصغ الشرط بعناية.

4. استخدم switch عندما تزداد الحالات المنطقية

إذا كان لديك أكثر من حالتين أو ثلاث حالات لعرض مكوّنات مختلفة، فإن تكرار جمل if أو تشابك العوامل الثلاثية قد يضر بوضوح الكود. هنا يظهر دور switch، خاصة عند عزله داخل مكوّن فرعي مسؤول فقط عن تحديد ما يجب عرضه.

في المثال التالي، لدينا قائمة تتبدل بين أكثر من تبويب:

export default function Menu() {
  const [menu, setMenu] = React.useState(1);

  function toggleMenu() {
    setMenu((m) => {
      if (m === 3) return 1;
      return m + 1;
    });
  }

  return (
    <>
      <MenuItem menu={menu} />
      <button onClick={toggleMenu}>Toggle Menu</button>
    </>
  );
}

function MenuItem({ menu }) {
  switch (menu) {
    case 1:
      return <Users />;
    case 2:
      return <Chats />;
    case 3:
      return <Rooms />;
    default:
      return null;
  }
}

لاحظ أن المكوّن الأب Menu بقي نظيفاً، بينما تم نقل منطق التبديل إلى المكوّن MenuItem. هذا النمط مفيد جداً عندما تريد فصل منطق العرض عن بقية سلوك المكوّن.

متى يكون switch مناسباً؟

• عند وجود عدة حالات واضحة ومحددة.
• عندما ترتبط كل حالة بمكوّن مختلف.
• إذا أردت تقليل التعقيد داخل المكوّن الرئيسي.

5. هل تريد كتابة الشروط كمكوّنات؟ جرّب JSX Control Statements

إذا كنت تفضل كتابة الشروط بأسلوب تصريحي أكثر، فهناك مكتبة مفيدة تُعرف باسم JSX Control Statements. هذه المكتبة توفر صياغة أقرب إلى مكوّنات React نفسها، بدلاً من الاعتماد على if أو العامل الثلاثي داخل JSX.

يمكنك تثبيت الإضافة عبر الأمر التالي:

npm install --save-dev babel-plugin-jsx-control-statements

ثم إضافتها إلى ملف .babelrc بالشكل التالي:

{
  "plugins": ["jsx-control-statements"]
}

بعد ذلك يمكنك كتابة الشروط بهذه الصياغة:

export default function App() {
  const { isLoading, isError, posts } = usePosts();

  return (
    <Choose>
      <When condition={isLoading}>
        <div>Loading...</div>
      </When>

      <When condition={isError}>
        <div>Error!</div>
      </When>

      <Otherwise>
        <PostList posts={posts} />
      </Otherwise>
    </Choose>
  );
}

هذا الأسلوب يمنحك بنية سهلة الفهم، خصوصاً في الواجهات التي تحتوي على حالات متعددة. ومع ذلك، يجب تقييمه حسب طبيعة المشروع والفريق، لأن الاعتماد على مكتبات إضافية قد لا يكون مناسباً دائماً إذا كان الفريق يفضل الحلول القياسية في React.

أخطاء شائعة يجب تجنبها عند كتابة الشروط في React

• الإفراط في استخدام العوامل الثلاثية المتداخلة داخل JSX، لأنها تجعل القراءة مرهقة.
• ترك المنطق الشرطي يزدحم داخل المكوّن الرئيسي بدلاً من نقله إلى مكوّنات فرعية.
• استخدام if داخل JSX مباشرة، وهو أمر غير مدعوم.
• الاعتماد على && في حالات قد تحتوي على قيم مثل 0 أو سلاسل فارغة دون انتباه.
• إهمال default في جمل switch، ما قد يؤدي إلى سلوك غير متوقع.

كيف تختار النمط المناسب؟

اختيار أسلوب الشرط يعتمد على السياق، وليس على قاعدة ثابتة واحدة. إليك قاعدة عملية سريعة:

• استخدم if عند الخروج المبكر أو التعامل مع حالات التحميل والخطأ.
• استخدم ternary عندما تحتاج إلى الاختيار بين عنصرين داخل JSX.
• استخدم && عندما تريد إظهار عنصر واحد فقط عند تحقق الشرط.
• استخدم switch إذا كانت لديك عدة حالات منفصلة وواضحة.
• استخدم مكتبات مثل JSX Control Statements إذا كان فريقك يفضل الأسلوب التصريحي وتقبلون إضافة أدوات بناء إضافية.

الخلاصة التقنية

كتابة الشروط في React ليست مجرد مسألة تنسيق، بل تؤثر مباشرة في قابلية القراءة والصيانة وسهولة التوسع. أفضل نهج عملي هو اختيار أبسط أداة تؤدي الغرض: if للحالات المبكرة، ternary للمفاضلة المباشرة، && للعرض المشروط البسيط، وswitch للحالات المتعددة. كلما كان منطقك أوضح وأقل ازدحاماً، كان مكوّنك أكثر احترافية وأسهل على فريق التطوير في المستقبل.