اليوم الخامس من تعلم React: التجميع (Batching) والتحديثات الوظيفية (Functional Updates)
كنت أعتقد أن استدعاء دالة تعيين الحالة (state setter) عدة مرات يؤدي إلى عمليات إعادة تصيير (renders) متعددة.
كنت مخطئاً.
React أذكى من ذلك؛ فهي تستخدم عملية تسمى التجميع التلقائي (Automatic Batching).
بدلاً من إعادة التصيير بعد كل تحديث منفرد، تقوم React بتجميعها معاً. فهي تجمع كل التحديثات وتجري عملية إعادة تصيير واحدة فقط، مما يحسن الأداء.
إليكم ما تعلمته اليوم.
عملية التجميع (The Batching Process) عندما تستدعي دوال حالة متعددة، تتبع React هذا التدفق:
- تحدث تحديثات حالة متعددة.
- تقوم React بتجميعها معاً.
- تقوم React بعملية إعادة تصيير واحدة.
- تقوم React بتثبيت التغييرات في واجهة المستخدم (UI).
المشكلة في التحديثات القياسية (Standard Updates)
حاولت كتابة هذا الكود:
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
كنت أتوقع أن يرتفع العداد من 0 إلى 3. لكنه ارتفع من 0 إلى 1 فقط.
يحدث هذا لأن setCount(count + 1) لا تعني "زد العداد بمقدار 1".
بل تعني "اجعل قيمة العداد تساوي هذه القيمة المحددة".
إذا كانت قيمة count هي 0، فإن كل سطر يخبر React بتعيين القيمة إلى 1. تقوم React بتجميع هذه الأوامر وترى أن التعليمات النهائية هي تعيين القيمة إلى 1.
الحل: التحديثات الوظيفية (Functional Updates) لإصلاح ذلك، يجب عليك استخدام التحديث الوظيفي (functional update). هذا الأسلوب يستخدم أحدث حالة متاحة في طابور التحديثات (update queue).
الطريقة الصحيحة:
setCount((prev) => prev + 1);
عند استخدام هذا النمط، تعطي React كل تحديث أحدث قيمة متاحة.
- التحديث الأول: 0 + 1 = 1
- التحديث الثاني: 1 + 1 = 2
- التحديث الثالث: 2 + 1 = 3
الآن يصل العداد بالفعل إلى 3.
خطأ شائع
كتبت ذات مرة:
setCount((prev) => { prev + 1 });
أصبح العداد undefined.
عندما تستخدم الأقواس المتعرجة {} في دالة السهم (arrow function)، يجب عليك استخدام الكلمة المفتاحية return.
استخدم هذا بدلاً من ذلك:
setCount((prev) => prev + 1);
النقاط الرئيسية المستفادة:
- تقوم React بتجميع تحديثات الحالة المتعددة لتحسين السرعة.
- استدعاءات
setStateلا تؤدي دائماً إلى إعادة تصيير فورية. - التحديثات القياسية تستخدم القيمة من دورة إعادة التصيير الحالية.
- التحديثات الوظيفية تستخدم أحدث حالة من طابور التحديثات.
- تستخدم React طابور تحديث (Update Queue) داخلي لإدارة هذه التغييرات.