أنماط الاستخدام الخاطئة لـ useState في React Js

تتطلب كتابة كود React نظيف إدارة ذكية للحالة (state). تؤدي أنماط الحالة السيئة إلى ظهور أخطاء (bugs) وتعقيد الكود.

تجنب هذه الأخطاء الأربعة الشائعة:

  1. تجميع البيانات المرتبطة

لا تقم بإنشاء hooks للحالة منفصلة لقيم تتغير معاً.

بدلاً من:

  • const [x, setX] = useState(0);
  • const [y, setY] = useState(0);

استخدم كائناً (object):

  • const [position, setPosition] = useState({ x: 0, y: 0 });

هذا يجعل تحديثاتك نظيفة ومنظمة.

  1. تجنب الحالات المتعارضة

عندما تتبع قيم منطقية (booleans) متعددة نفس العملية، فإنك تتسبب في ظهور أخطاء.

بدلاً من وجود:

  • isSubmitting
  • isSubmit

استخدم سلسلة نصية واحدة للحالة (status string):

  • status: 'TYPING'
  • status: 'SUBMITTING'
  • status: 'SUBMITTED'

اشتق منطق واجهة المستخدم (UI logic) من مصدر الحقيقة الوحيد هذا.

  1. إزالة الحالة الزائدة عن الحاجة

إذا كان بإمكانك حساب قيمة أثناء عملية الصيرورة (render)، فلا تضعها في الحالة (state).

لا تقم بتخزين:

  • firstName
  • lastName
  • fullName

قم فقط بتخزين الاسم الأول والاسم الأخير. احسب الاسم الكامل أثناء التشغيل:

  • const fullName = firstName + " " + lastName;

أيضاً، لا تقم أبداً بتخزين الـ props في الـ state. يتم تهيئة الـ state مرة واحدة فقط. إذا تغيرت الـ prop الخاصة بك، فلن يتم تحديث الـ state. استخدم الـ prop مباشرة.

  1. توقف عن تكرار البيانات

لا تقم بتخزين نفس البيانات في حالتين مختلفتين.

إذا كان لديك قائمة مهام ومهمة مختارة، فلا تقم بتخزين كائن المهمة (task object) بالكامل في كلا المكانين. هذا يجعل التحديثات صعبة.

بدلاً من ذلك:

  • قم بتخزين قائمة المهام.
  • قم بتخزين الـ selectedTaskId فقط.
  • ابحث عن المهمة من القائمة باستخدام ذلك المعرف (ID) أثناء عملية الصيرورة (render).

هذا يضمن أن المهمة المختارة تتطابق دائماً مع أحدث البيانات في قائمتك.

المصدر: https://dev.to/kkr0423/reactjs-usestate-antipatterns-58i9