5 نصائح في JavaScript لتحسين جودة كود React

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

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

1. استخدام العامل Optional Chaining للوصول الآمن إلى الخصائص

من أكثر الأخطاء شيوعًا في JavaScript محاولة الوصول إلى خاصية داخل كائن غير موجود أصلًا. فعندما تكون قيمة الكائن null أو undefined، سيؤدي ذلك إلى ظهور خطأ من نوع TypeError.

لنفترض أن لديك مكوّنًا يعرض زر تعديل المنشور فقط إذا كان المستخدم الحالي هو صاحب المنشور:

export default function EditButton({ post }) {
  const user = useAuthUser();
  const isPostAuthor = post.author.userId !== user && user.userId;

  return isPostAuthor ? <EditButton /> : null;
}

المشكلة هنا أن المتغير user قد يكون غير معرّف لحظة التنفيذ، لذلك يتم استخدام الشرط && لتفادي الخطأ. لكن هذا الأسلوب يصبح مرهقًا كلما زاد التداخل بين الكائنات.

هنا تظهر فائدة العامل Optional Chaining الذي يُكتب بهذه الصيغة ?.. هذا العامل يسمح لك بالتحقق من وجود الكائن قبل محاولة الوصول إلى خصائصه، دون كتابة شروط طويلة.

export default function EditButton({ post }) {
  const user = useAuthUser();
  const isPostAuthor = post.author.userId !== user?.userId;

  return isPostAuthor ? <EditButton /> : null;
}

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

متى يكون هذا الأسلوب مفيدًا؟

• عند التعامل مع بيانات قادمة من API.
• عند وجود كائنات متداخلة قد لا تكون مكتملة.
• عند تحميل بيانات المستخدم أو إعدادات الصفحة بشكل غير متزامن.

2. الاستفادة من Implicit Return مع الأقواس في الدوال السهمية

في تطبيقات React، يمكنك كتابة المكوّنات باستخدام الكلمة function أو من خلال الدوال السهمية Arrow Functions. وعند استخدام function، يجب كتابة return بشكل صريح لإرجاع عناصر JSX.

export default function App() {
  return (
    <Layout>
      <Routes />
    </Layout>
  );
}

لكن عند استخدام دالة سهمية، يمكنك الاستغناء عن return إذا وضعت القيمة المرجعة داخل أقواس ()، ويُعرف ذلك باسم Implicit Return.

const App = () => (
  <Layout>
    <Routes />
  </Layout>
);

export default App;

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

استخدامه مع .map()

يمكنك أيضًا الاستفادة من هذا النمط عند التكرار على القوائم باستخدام الدالة .map() داخل React:

function PostList() {
  const posts = usePostData();

  return posts.map(post => (
    <PostListItem key={post.id} post={post} />
  ));
}

بدلًا من كتابة return داخل كل تكرار، يكفي استخدام الأقواس لإرجاع JSX مباشرة، وهو ما يحسن قابلية القراءة خاصة في القوائم القصيرة.

3. استخدام العامل Nullish Coalescing لتحديد القيم البديلة بدقة

يستخدم كثير من المطورين العامل || لتوفير قيمة بديلة عندما تكون القيمة الأصلية غير متاحة. لكن المشكلة أن هذا العامل يتعامل مع أي قيمة Falsy على أنها مفقودة، مثل 0 و'' وNaN، وليس فقط null أو undefined.

لنفترض أنك تعرض سعر منتج داخل صفحة:

export default function ProductPage({ product }) {
  return (
    <>
      <ProductDetails />
      <span>{product.price || "Product is unavailable"}</span>
    </>
  );
}

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

الحل الأفضل هو استخدام العامل ?? المعروف باسم Nullish Coalescing. هذا العامل يعيد القيمة الموجودة في الطرف الأيسر ما دامت ليست null أو undefined فقط.

null ?? 'fallback'; // 'fallback'
0 ?? 42; // 0

وإليك التصحيح المناسب:

export default function ProductPage({ product }) {
  return (
    <>
      <ProductDetails />
      <span>{product.price ?? "Product is unavailable"}</span>
    </>
  );
}

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

مقارنة سريعة بين || و??

4. استخدام Object Spread Operator لتحديث الحالة State بشكل صحيح

عند العمل مع React، يمكنك إدارة الحالة إما من خلال عدة متغيرات باستخدام useState، أو من خلال كائن واحد يحتوي على أكثر من قيمة. في النماذج Forms، يكون استخدام الكائن الواحد خيارًا عمليًا في كثير من الحالات.

في المثال التالي، نحتفظ ببيانات التسجيل داخل حالة واحدة تشمل اسم المستخدم والبريد الإلكتروني وكلمة المرور:

import React from 'react'

export default function SignUpPage() {
  const [state, setState] = React.useState({
    username: '',
    email: '',
    password: ''
  });

  function handleSubmit(event) {
    event.preventDefault();
    validateForm(state);
    signUpUser(state);
  }

  function handleChange(event) {
    const { name, value } = event.target;
    setState({
      ...state,
      [name]: value
    });
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="username" onChange={handleChange} />
      <input name="email" onChange={handleChange} />
      <input name="password" onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

لاحظ استخدام العامل ... داخل setState(). هذا هو Object Spread Operator، ووظيفته نسخ القيم الحالية من الحالة السابقة ثم تحديث المفتاح المطلوب فقط.

إذا تجاهلت هذه الخطوة، فسيتم استبدال الكائن بالكامل بالقيمة الجديدة، وقد تفقد بقية الحقول المخزنة في الحالة.

لماذا يُعد هذا الأسلوب مهمًا؟

• يحافظ على بقية خصائص الحالة دون حذفها.
• يجعل تحديث النماذج الديناميكية أكثر سهولة.
• يساعد في كتابة كود قابل للتوسع عند زيادة عدد الحقول.

5. استخدام Ternary Operator لتطبيق classes وprops بشكل شرطي

يُعد العامل الثلاثي condition ? value1 : value2 من أكثر الأدوات أهمية داخل React، لأنه يتيح لك كتابة شروط مختصرة مباشرة داخل JSX. وغالبًا ما يُستخدم لإظهار العناصر أو إخفائها، لكنه مفيد أيضًا في ضبط className والخصائص props.

في المثال التالي، يتم تغيير التنسيق بحسب تفعيل الوضع الداكن:

export default function App() {
  const { isDarkMode } = useDarkMode();

  return (
    <main className={`body ${isDarkMode ? "body-dark" : "body-light"}`}>
      <Routes />
    </main>
  );
}

هنا نستخدم Template Literal مع العامل الثلاثي لتحديد الصنف المناسب دون الحاجة إلى مكتبات خارجية مثل classnames في الحالات البسيطة.

ولا يقتصر هذا الأسلوب على الأصناف فقط، بل يمكن تطبيقه على أي خاصية تمررها إلى المكوّنات:

export default function App() {
  const { isMobile } = useDeviceDetect();

  return (
    <Layout height={isMobile ? '100vh' : '80vh'}>
      <Routes />
    </Layout>
  );
}

إذا كان المستخدم على جهاز محمول، فسيتم تمرير قيمة ارتفاع مناسبة للشاشات الصغيرة، وإلا فسيتم استخدام قيمة مختلفة.

أفضل ممارسات عند استخدام العامل الثلاثي

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

كيف تنعكس هذه النصائح على جودة مشروعك؟

التحسين الحقيقي في مشاريع React لا يأتي فقط من معرفة المكتبة نفسها، بل من إتقان أساسيات JavaScript الحديثة. عندما تستخدم أدوات مثل Optional Chaining وNullish Coalescing وObject Spread بشكل واعٍ، فإنك تحقق مجموعة من الفوائد المهمة:

1. تقليل الأخطاء الناتجة عن القيم غير المتوقعة.
2. كتابة كود أقصر وأكثر وضوحًا.
3. تحسين تجربة فريق العمل في قراءة الكود وصيانته.
4. رفع مرونة المكوّنات عند إعادة الاستخدام.
5. تسهيل تطوير الواجهات المعتمدة على البيانات المتغيرة.

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

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