كيفية كتابة كود React أنظف وأكثر قابلية للصيانة

مقدمة: لماذا يُعد تنظيف كود React خطوة أساسية؟

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

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

1. الاستفادة من الاختصارات في JSX

من أفضل الطرق لتقليل الضوضاء داخل الكود استخدام الصياغة المختصرة في JSX. على سبيل المثال، عند تمرير خاصية منطقية مثل showTitle بقيمة true، لا حاجة لكتابتها بشكل صريح.

// src/App.js
export default function App() {
  return (
    <main>
      <Navbar showTitle={true} />
    </main>
  );
}

function Navbar({ showTitle }) {
  return (
    <div>
      {showTitle && <h1>My Special App</h1>}
    </div>
  );
}

يمكن اختصار ذلك إلى:

// src/App.js
export default function App() {
  return (
    <main>
      <Navbar showTitle />
    </main>
  );
}

function Navbar({ showTitle }) {
  return (
    <div>
      {showTitle && <h1>My Special App</h1>}
    </div>
  );
}

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

// src/App.js
export default function App() {
  return (
    <main>
      <Navbar title="My Special App" />
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
}

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

2. انقل الأجزاء غير المرتبطة إلى مكونات مستقلة

من أهم مبادئ كتابة كود نظيف في React تقسيم الواجهة إلى مكونات منفصلة، بحيث يؤدي كل مكوّن وظيفة واحدة واضحة. لننظر إلى المثال التالي:

// src/App.js
export default function App() {
  const posts = [
    { id: 1, title: "How to Build YouTube with React" },
    { id: 2, title: "How to Write Your First React Hook" }
  ];

  return (
    <main>
      <Navbar title="My Special App" />
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
}

رغم أن الكود يعمل بشكل صحيح، فإن مكوّن App بات يجمع أكثر من مسؤولية: عرض شريط التنقل، والتعامل مع قائمة المقالات. الأفضل هنا هو استخراج منطق عرض المقالات إلى مكوّن مستقل مثل FeaturedPosts:

// src/App.js
export default function App() {
  return (
    <main>
      <Navbar title="My Special App" />
      <FeaturedPosts />
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
}

function FeaturedPosts() {
  const posts = [
    { id: 1, title: "How to Build YouTube with React" },
    { id: 2, title: "How to Write Your First React Hook" }
  ];

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

بهذا الشكل، يصبح اسم كل مكوّن معبّراً عن دوره، ويكفي النظر إلى App لفهم بنية الصفحة بسرعة.

3. أنشئ ملفاً مستقلاً لكل مكوّن

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

هذا التنظيم يحقق فوائد مهمة:

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

مثال على هذا الأسلوب:

// src/App.js
import Navbar from './components/Navbar.js';
import FeaturedPosts from './components/FeaturedPosts.js';

export default function App() {
  return (
    <main>
      <Navbar title="My Special App" />
      <FeaturedPosts />
    </main>
  );
}

// src/components/Navbar.js
export default function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
}

// src/components/FeaturedPosts.js
export default function FeaturedPosts() {
  const posts = [
    { id: 1, title: "How to Build YouTube with React" },
    { id: 2, title: "How to Write Your First React Hook" }
  ];

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

4. انقل المنطق المشترك إلى React Hooks مخصصة

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

لنفترض أنك تريد جلب المقالات من واجهة برمجية باستخدام fetch داخل مكوّن FeaturedPosts:

// src/components/FeaturedPosts.js
import React from 'react';

export default function FeaturedPosts() {
  const [posts, setPosts] = React.useState([]);

  React.useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

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

إذا احتجت إلى هذا السلوك في أكثر من مكوّن، فالأفضل هو تغليفه في Hook مخصص مثل useFetchPosts:

// src/hooks/useFetchPosts.js
import React from 'react';

export default function useFetchPosts() {
  const [posts, setPosts] = React.useState([]);

  React.useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

  return posts;
}

ثم يمكنك إعادة استخدامه بسهولة:

// src/components/FeaturedPosts.js
import useFetchPosts from '../hooks/useFetchPosts.js';

export default function FeaturedPosts() {
  const posts = useFetchPosts();

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

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

5. قلّل قدر الإمكان من منطق JavaScript داخل JSX

وضع الكثير من التعليمات البرمجية مباشرة داخل JSX يضر بالوضوح، خصوصاً عند التعامل مع الأحداث. مثال شائع على ذلك كتابة دالة كاملة داخل الخاصية onClick:

// src/components/FeaturedPosts.js
import useFetchPosts from '../hooks/useFetchPosts.js';

export default function FeaturedPosts() {
  const posts = useFetchPosts();

  return (
    <ul>
      {posts.map((post) => (
        <li
          onClick={event => {
            console.log(event.target, 'clicked!');
          }}
          key={post.id}
        >
          {post.title}
        </li>
      ))}
    </ul>
  );
}

هذه الصياغة تعمل، لكنها تجعل القراءة أصعب. الحل الأنظف هو استخراج الدالة إلى معالج مستقل باسم واضح مثل handlePostClick:

// src/components/FeaturedPosts.js
import useFetchPosts from '../hooks/useFetchPosts.js';

export default function FeaturedPosts() {
  const posts = useFetchPosts();

  function handlePostClick(event) {
    console.log(event.target, 'clicked!');
  }

  return (
    <ul>
      {posts.map((post) => (
        <li onClick={handlePostClick} key={post.id}>
          {post.title}
        </li>
      ))}
    </ul>
  );
}

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

6. نظّم التنسيقات المضمنة لتفادي تضخم الكود

التنسيقات المضمنة أو inline styles شائعة في React، لكنها قد تسبب فوضى بصرية عندما تتكاثر داخل JSX:

// src/App.js
export default function App() {
  return (
    <main style={{ textAlign: 'center' }}>
      <Navbar title="My Special App" />
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div style={{ marginTop: '20px' }}>
      <h1 style={{ fontWeight: 'bold' }}>{title}</h1>
    </div>
  );
}

الأفضل غالباً نقل هذه الأنماط إلى ملف CSS منفصل، لكن إذا احتجت إلى إبقائها داخل المكوّن، فمن الأفضل تنظيمها في كائن واضح:

// src/App.js
export default function App() {
  const styles = {
    main: {
      textAlign: 'center'
    }
  };

  return (
    <main style={styles.main}>
      <Navbar title="My Special App" />
    </main>
  );
}

function Navbar({ title }) {
  const styles = {
    div: {
      marginTop: '20px'
    },
    h1: {
      fontWeight: 'bold'
    }
  };

  return (
    <div style={styles.div}>
      <h1 style={styles.h1}>{title}</h1>
    </div>
  );
}

بهذه الطريقة، يصبح JSX أنظف، ويسهل تعديل التنسيقات دون تشتيت الانتباه عن بنية الواجهة.

7. قلّل Prop Drilling باستخدام React Context

عندما تحتاج إلى تمرير البيانات نفسها عبر عدة مكونات متداخلة، ينتهي بك الأمر غالباً إلى ما يعرف باسم prop drilling، أي تمرير الخصائص على عدة مستويات فقط لتصل إلى المكوّن المطلوب. هذا الأسلوب يربك البنية ويزيد التكرار.

الحل المناسب في كثير من الحالات هو استخدام React Context لمشاركة البيانات العامة مثل بيانات المستخدم، اللغة، أو الإعدادات.

// src/App.js
import React from 'react';

const UserContext = React.createContext();

export default function App() {
  const user = { name: 'Reed' };

  return (
    <UserContext.Provider value={user}>
      <main>
        <Navbar title="My Special App" />
        <FeaturedPosts />
      </main>
    </UserContext.Provider>
  );
}

// src/components/Navbar.js
function Navbar({ title }) {
  const user = React.useContext(UserContext);

  return (
    <div>
      <h1>{title}</h1>
      {user && <a href="/logout">Logout</a>}
    </div>
  );
}

// src/components/FeaturedPosts.js
function FeaturedPosts() {
  const posts = useFetchPosts();
  const user = React.useContext(UserContext);

  if (user) return null;

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

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

أفضل ممارسات إضافية للحفاظ على كود React نظيفاً

اختر أسماء واضحة للمكونات والدوال

الاسم الجيد يختصر كثيراً من الشرح. استخدم أسماء تصف الدور الحقيقي مثل FeaturedPosts وhandlePostClick بدلاً من أسماء مبهمة.

اجعل كل مكوّن مسؤولاً عن مهمة واحدة

إذا كان المكوّن يفعل أشياء كثيرة في الوقت نفسه، فهذه إشارة إلى أنه يحتاج إلى تقسيم.

راجع الكود من زاوية القارئ

اسأل نفسك دائماً: هل يمكن لمطوّر آخر فهم هذا المكوّن بسرعة؟ إذا كانت الإجابة لا، فغالباً توجد فرصة لتحسين البنية أو التسمية أو التقسيم.

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

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