أساسيات useState والتحديثات الصحيحة

الهدف: تعلّم كيفية عمل useState وكيفية تحديثه بالطريقة الصحيحة عندما تعتمد التغييرات على القيمة السابقة.

• قيمة الحالة + دالة التعيين
• التحديثات المجمّعة
• دالة التحديث الوظيفية

تعيد useState مصفوفة: [value, setValue]. يؤدي استدعاء setValue إلى جدولة إعادة التصيير؛ وقد يجمع React عدة تحديثات لتحسين الأداء.

أنشئ حالة وحدّثها عند النقر؛ يوضح ذلك التدفق الأساسي لـ setState.

إذا كانت الحالة التالية تعتمد على الحالة السابقة، فاستخدم functional updater لتجنب قراءة قيم قديمة أثناء التحديثات المجمّعة.

• setX(prev => prev + 1)
• يعمل بشكل موثوق حتى مع الاستدعاءات المتعددة

يتطلب استدعاء دالة التعيين عدة مرات داخل معالج واحد استخدام functional updater للحصول على القيمة النهائية الصحيحة.

نصائح:

• لا تعدّل متغيرات مثل count++ وتتوقع أن يلاحظ React ذلك؛ استخدم دالة التعيين دائمًا.
• استخدم دالة التحديث الوظيفية عندما تعتمد القيمة التالية على القيمة السابقة.
• قد تُجمّع استدعاءات دالة التعيين المتعددة في تحديث واحد.

مراجعة: يمنحك useState قيمة ودالة تعيين؛ ويجمع React التحديثات؛ فاستخدم functional updater للتغييرات المستندة إلى القيمة السابقة.