أفضل الممارسات وتنظيم المشروع

تنظيم المشروع

بنية شائعة وواضحة:

src/
  components/    ← مكوّنات قابلة لإعادة الاستخدام (Button, Card)
  pages/         ← مكوّنات الصفحات
  hooks/         ← الخطّافات المخصّصة (useFetch)
  context/       ← مزوّدات السياق
  utils/         ← دوال مساعدة
  App.jsx

1) مكوّنات صغيرة ومركّزة

🔑 كل مكوّن يفعل شيئًا واحدًا. إن كبر مكوّن (أكثر من ~150 سطرًا)، قسّمه إلى مكوّنات أصغر.

2) قواعد الخطّافات (Rules of Hooks)

// ✅ استدعِ الخطّافات في أعلى المكوّن دائمًا
function Good() {
  const [x, setX] = useState(0);
  useEffect(() => {}, []);
}

// ❌ لا تستدعها داخل شرط أو حلقة
function Bad() {
  if (cond) {
    const [x] = useState(0);   // خطأ!
  }
}

استدعِ الخطّافات في المستوى الأعلى فقط، وداخل مكوّنات React أو خطّافات مخصّصة فقط.

3) لا تعدّل الحالة مباشرةً

// ❌ خطأ
todos.push(newTodo);
setTodos(todos);

// ✅ صحيح: أنشئ نسخة جديدة
setTodos([...todos, newTodo]);
setUser({ ...user, name: "جديد" });

4) استخدم key ثابتًا في القوائم

{items.map((item) => (
  <li key={item.id}>{item.name}</li>   // id ثابت، لا الفهرس
))}

5) رفع الحالة عند الحاجة (Lifting State Up)

إن احتاج مكوّنان نفس البيانات، ضع الحالة في أقرب أب مشترك ومرّرها للأسفل.

6) افصل المنطق عن العرض

انقل المنطق المعقّد إلى خطّافات مخصّصة أو دوال مساعدة، وأبقِ JSX نظيفًا.

7) أسماء واضحة واصطلاحات

• مكوّنات بـ PascalCase (UserCard).
• خطّافات تبدأ بـ use.
• ملف لكل مكوّن باسمه.

الأخطاء الشائعة

• ❌ تعديل الحالة/الخصائص مباشرةً → استخدم نسخًا جديدة.
• ❌ استخدام الفهرس كـ key في قوائم متغيّرة → أخطاء عرض.
• ❌ مكوّنات ضخمة تفعل كل شيء → قسّمها.
• ❌ خرق قواعد الخطّافات (شرطية/متداخلة).

خلاصة

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